Skeleton Loading
Placeholder shapes matching the layout of content that is still loading, shown instead of a spinner so the page keeps its structure.
A skeleton reserves the space the real content will occupy. That does two things a spinner cannot: it prevents the layout shift that happens when content lands, and it tells people what is coming — three cards, a table, an article — so the wait has a shape. It suits content-heavy views where the structure is predictable and the wait is long enough to perceive, roughly half a second and up.
The skeleton has to match the real layout closely. If it shows three lines and four arrive, the page jumps anyway and you have paid the complexity cost for nothing. Keep the shimmer subtle — an animation that draws more attention than the content it replaces makes the wait feel longer — and never use a skeleton for an action. Saving a form is not content arriving.
In practice
A news app replaced its spinner with skeleton cards matching the article list. Measured load time was unchanged; in a five-second perception test, users rated the skeleton version “faster” about two to one, and cumulative layout shift dropped from 0.21 to 0.02 because the space was already reserved.
Where teams get it wrong
- Skeletons whose shape does not match the content, so the layout jumps anyway.
- Skeletons for actions rather than content.
- Aggressive shimmer that dominates the screen.
- Skeletons shown for waits short enough that they only flash.
- Skeletons that never resolve because the failure path renders nothing.
( Learn more )
Related terms
All terms- Loading SpinnerAn indeterminate progress indicator shown while a system is working and cannot say how long it will take.
- Progress BarA determinate indicator showing how much of a known task is done — usable only when the total is actually known.
- Empty StateWhat a screen shows when it has no content yet — the first screen every new account sees, and usually the last one anybody designs.
- CardA bounded container grouping related content about one thing — useful for scanning, expensive in vertical space.