Loading States Best Practices
Skeleton screens, spinners, progress bars, optimistic UI, and accessible loading states based on Nielsen Norman Group, UX research, and React/Next.js patterns.
- Difficulty
- intermediate
- Read time
- 1 min read
- Version
- v1.0.0
- Confidence
- established
- Last updated
Quick Reference
Use skeleton screens for container-based content (cards, lists, tables) loading >1s. Use spinners for actions <4s. Use progress bars for >4s with known duration. Optimistic UI for user actions (likes, toggles). Always include aria-busy='true' and aria-live regions for screen readers. Announce loading completion.
Use When
- Fetching data from APIs
- Loading page content
- Submitting forms
- Uploading files
- Processing user actions
Skip When
- Instant operations (<100ms)
- Static content
Loading States Best Practices
Skeleton screens, spinners, progress bars, optimistic UI, and accessible loading states based on Nielsen Norman Group, UX research, and React/Next.js patterns.