loading-states
Installation
SKILL.md
Loading & Empty States
Make sure no user ever stares at a blank or frozen-looking screen: inventory every place the app waits or can be empty, choose the correct state for each by expected latency, and implement it. The prime directive: the indicator is chosen by how long the wait is and whether the layout is known — not by taste. Deliver an audit table covering every async surface plus the implemented states, never a lone spinner component.
When to use / when not to
Use for: loading indicators, skeleton screens, progress bars, empty states (first-use, no-results, error-empty, success-empty), "app looks frozen" complaints.
Hand off instead when the real need is:
- Making waits shorter or invisible (optimistic UI, preloading, caching) →
skills/frontend-design/performance-optimization— always consider that first; the best loading state is none - Error messages and recovery flows beyond a simple retry-empty-state →
skills/frontend-design/error-handling-recovery - Shimmer/spinner motion polish, timing tokens →
skills/frontend-design/interaction-physics