| name | skeleton-loading-standards |
| description | Skeleton-placeholder loading standards for Hora-family Android apps — structural parity, M3 surface tonality, and a reveal transition into real content. |
Skeleton loading standards
Data-driven screens show a skeleton that mimics the final content structure, then reveal
real data — an "ultra smooth" load with no blank screen or spinner gap.
Principles
- Structural parity. Skeleton blocks match the real components' proportions, margins,
and shapes — the same layout, greyed out.
- Surface tonality. Use
colorSurfaceContainerHigh / colorSurfaceContainerHighest
for the skeleton blocks — distinct but flat, on-brand M3.
- Implicit shimmer. Skeletons don't need an aggressive shimmer animation; the
perceived motion comes from the transition into real data.
Implementation
- Build a composite skeleton layout that
includes the per-item skeletons (e.g. a hero
skeleton plus a few row skeletons), shown while loading.
- On data ready, hide the skeleton and reveal the real content with a reveal animation,
optionally bridged by a light haptic.
Reveal parameters
- Duration ~400–500ms.
- Interpolator: emphasized (M3 standard).
- Optional: a click / segment-tick haptic on reveal (guarded — see
m3e-haptic-standards).
Checklist
