pattern · perceived-performance
Skeleton screen
also called skeleton, content placeholder
A loading state made of grey shapes standing where the content will be, showing the layout before the data arrives.
A skeleton is a promise about layout. Instead of a spinner in the middle of an empty page, you get the page: three rows, an avatar on the left, two lines of text each. Nothing has loaded, but the eye already knows where to go, and the arrival of real content is a fill rather than a jump.
That only holds if the skeleton matches what comes back. Bones in the wrong place make the load feel worse than a blank area, because the layout visibly corrects itself. Match the number of rows you usually get, and the shape of the real content, or do not use the pattern.
It is the wrong tool for short waits and for actions. Under about 300ms it is noise, and for a single button press a spinner in the button says more. Where the result is predictable, skip the wait entirely with optimistic UI. The moving sweep across the bones is called a shimmer, which is decoration and not part of the definition.
Which word?
| If you want | say |
|---|---|
| showing the shape of content while it loads | skeleton screen |
| work is happening and nobody knows for how long | spinner |
| the screen for a container with nothing in it yet | empty state |
| showing the result before the server confirms it | optimistic ui |
| a blurred or coloured block stands in until the photo loads | progressive image loading |
Related
See also: Shimmer · Layout shift · Aspect ratio box
Implementations
Specimens illustrate the concept; for production use, start here.
| shadcn | Skeleton |
| carbon | Skeleton states |