Skeleton screen
Also called: skeleton loader, skeleton state, content placeholder, shimmer.
While content loads, the page shows gray shapes where the text and pictures will go. It makes loading feel faster and stops the layout from jumping when the real content arrives.
Press “Load again”: gray shapes hold each spot until the real content arrives. Nothing jumps.
Loaded
Say it in a prompt
While the feed loads, show a skeleton screen of gray rounded blocks in the same size and place as the real cards, with a soft shimmer moving left to right. Swap in the real content without moving the layout. Seen on
- Airbnb: Before listings arrive, gray placeholder shapes stand in for them and shimmer.
- Vercel Geist design system: Geist's Skeleton component shows a placeholder while another part of the page loads.
You might describe it as
- grey boxes that flash while airbnb is loading
- gray boxes while the page loads
- placeholder shapes before the content shows up
- loading blocks that shine
Not to be confused with
- Spinner
A skeleton screen shows the shape of what's coming; a spinner just says wait.
- Empty state
A skeleton screen means content is on its way; an empty state means there is nothing to show.
- Preloader
A skeleton screen shows the page's shape right away; a preloader hides the whole site behind one screen until it has loaded.