Skeleton

A placeholder shape that mirrors content layout while it loads, reducing perceived wait time and preventing layout shift.

Usage
  • Size each Skeleton to match its real content (height, width, rounded) so the layout does not shift when the data arrives
  • Compose multiple Skeleton instances to mirror complex shapes
Caveats

Skeletons are silent to screen readers, wrap the loading group in role="status" + aria-live="polite" to announce that content is loading.