Design Skeleton Screens Correctly
Feedback & States · loading
Updated 2026-07-28
- Skeletons should prepare users for real content.
- Match the actual layout:
- Avatar shapes.
- Text lengths.
- Card structures.
- Image areas.
- Avoid generic gray blocks everywhere.
- Use skeletons when:
- Content structure is known.
- Loading takes noticeable time.
- Do not use skeletons for:
- Instant actions.
- Unknown progress.
- Very short delays.
- A good skeleton creates anticipation. A bad skeleton creates another waiting screen.
Related guides
UX Handbook