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.