28 Skeleton Screen. 28 of 95.
28/PERCEIVED PERFORMANCE/28 of 95
Skeleton Screen
Show the shape of what's coming.
The problem
A spinner tells you something is loading but nothing about what, so the wait feels longer and emptier.
The solution
Skeleton placeholders preview the layout, then swap to real content.
Experiment
Play with the values
2000ms
How it works
- The request starts, and the real content is not available yet.
- A skeleton with the same layout as the eventual content is rendered immediately.
- A shimmer signals that the placeholder is activity, not an empty state.
- When the data arrives, it is ready to occupy the space the skeleton reserved.
- The skeleton swaps for the real content without the page jumping.
Seen in
Feeds
Post placeholders show the layout before content streams in.
Profiles
Avatar and text blocks preview structure while data loads.
Dashboards
Card skeletons reduce layout shift as widgets populate.
Tables
Row placeholders keep the page stable during fetches.