Choose the Right Loading Pattern for Every Situation
Feedback & States · loading
Updated 2026-07-28
- Treat loading states as a system, not a default component. The right pattern depends on what users know, how long they will wait, and what level of feedback they need.
- Use skeleton screens when the structure of the content is known:
- Cards
- Lists
- Articles
- Dashboard layouts
Skeletons work best when loading takes longer than around 300 milliseconds because they give users a preview of the upcoming layout and make the experience feel faster.
- Use spinners for short or uncertain waits. When the duration is unknown and the user only needs confirmation that something is happening, a spinner can communicate activity. Avoid using spinners for full-page loading whenever possible.
- Use progress indicators when completion can be measured. For tasks like:
- File uploads
- Software installs
- Large exports
Show the percentage or remaining progress when the task takes more than a few seconds. Visible progress builds trust because users understand what is happening and how long they may need to wait.
- Use optimistic UI for actions that usually succeed. For interactions like:
Update the interface immediately and handle failures by rolling the change back if necessary. Fast feedback makes the product feel responsive.
- Avoid showing loading states for extremely fast operations. If an action completes in under 300 milliseconds, show nothing. A brief flash of a loading indicator can feel like a glitch instead of useful feedback.
- Match the loading pattern to user expectations:
- Skeletons show what is coming.
- Spinners show that work is happening.
- Progress bars show how much remains.
- Optimistic updates show immediate results.
- Good loading design reduces uncertainty without creating unnecessary visual noise. The goal is to make waiting feel clear, predictable, and intentional.
Related guides
UX Handbook