System & logic
Skeleton loading
Spinners draw attention to the waiting. Skeletons (grey bars) imply progress and structure.
skeleton — the layout arrives before the data
spinner — a clock with no hands
Grey layout pulse
Giant spinning wheel
How to apply it
- 1
Replace spinners with grey bars matching the shape of each content block, image, title, body.
- 2
Pulse the bars at a slow, consistent rate (1.5-2s cycle) so it reads as alive, not stuck.
- 3
Match skeleton block dimensions to real content so nothing shifts when it swaps in.
- 4
Swap skeleton for content directly, never fade to blank first.
Why it works
Perceived-performance research shows a grey layout pulse mimicking the final content structure reads as progress in motion, while a spinning wheel is an abstract token unrelated to what is loading. Skeletons prime the eye for where text and images will land, cutting perceived wait time even when actual load time is identical.
What breaks
A full-screen spinner spends the whole wait saying only that something is happening, so the content lands in one jump at the end and the reader starts over locating what they came for. A 900ms wait spent that way reads as a stall, and some of them reload before it resolves.
Review questions
- 1
Does the loading state show grey bars shaped like the final layout instead of a spinner?
- 2
Does the skeleton match the real content dimensions with no layout jump on load?
- 3
Is there any full-screen spinner used for initial content loading?