Skeleton Loading

Skeleton Principles

1. Match the actual content layout. A skeleton should preview the structure of what's loading.
2. Animate subtly. Pulse or shimmer animation at 1-2 second intervals.
3. Show within 300ms. If content loads faster than 300ms, skip the skeleton entirely.
4. Progressive loading. Show content as it arrives. Don't wait for everything.

Skeleton Patterns

Text Content

[████████████████████████] ← title (wider)
[██████████████] ← subtitle (narrower)
[████████████████████████████████████] ← body line 1
[██████████████████████████████] ← body line 2
[████████████████████] ← body line 3 (shorter)