Loading States and Skeleton Screens
Every time your application fetches data, there is a moment when content is not yet available. How you handle this moment significantly affects user perception of your product's performance.
The Problem With Blank Screens
When a page or component goes blank while data loads, users perceive the application as broken or slow — even if the actual load time is only 300ms. The transition from blank to content is jarring and creates anxiety.
Spinner vs. Skeleton
- Spinner/progress indicator: A spinning icon or progress bar indicating that work is happening. Simple to implement. Best for short loading times (<1 second) or for actions where the content shape is unknown.
- Skeleton screen: A placeholder that shows the rough shape of the content that will appear — grey blocks where text will be, grey rectangles where images will be. This technique dramatically reduces the perceived loading time because the layout does not shift when content appears.
When to Use Each
- Use skeletons for content-heavy pages (news feeds, dashboards, product listings)
- Use spinners for actions (form submission, file upload, button actions)
- Use progress bars for operations with known duration (file upload, multi-step processes)
Animation
Skeleton screens typically include a gentle shimmer animation — a subtle left-to-right highlight that signals activity. This should be subtle (not distracting) and respect the user's reduced-motion preference.