Azalea

Skeleton

A placeholder while content loads.

Size it to the content it replaces

A skeleton of the wrong height is worse than a spinner: it promises a layout and then breaks it the moment real data arrives.

Guidance

Use it when

  • Content whose shape you know before it arrives — a list of rows, a card.
  • Loads long enough to notice. Under ~200ms a skeleton is just a flicker.

Reach for something else when

  • An unknown shape. A spinner is honest; a wrong skeleton is not.
  • Long operations with real progress. Show the progress.

Marked aria-hidden — a screen reader should hear the loading state from the region that is loading, not from a row of decorative grey boxes.