Skip to main content
UI/UX patterns recommended

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.

Tags

loading skeleton spinner progress optimistic-ui accessibility

Discussion