Add Loading/Error States
Eliminate silent failures and frozen screens: add loading, empty, and error states across the whole app.
The route
5 steps to Done
- 01
Inventory async surfaces
List every place the app waits or can fail.
Preview prompt + verify gate ▾ Hide ▴
Scan the app and produce a table of every async surface: data fetches (per view), mutations (per button/form), and lists that can be empty. For each record: current loading treatment (none/spinner/skeleton), current error treatment (none/console/UI), and empty-state presence. Test each by throttling the network and forcing a failure in devtools.
- ✓ Every fetch and mutation is listed
- ✓ Gaps verified by actual throttling/failure tests
- ✓ Empty-capable lists identified
- 02
Add loading states
Replace blank waits with skeletons and spinners.
Preview prompt + verify gate ▾ Hide ▴
Add loading treatments to every fetch and mutation. Requirements: list/detail views get skeletons matching their layout; buttons get spinners or label changes and are disabled while pending; page transitions with data get a top-level loading treatment; avoid layout shift when content arrives. No artificial delays.
- ✓ Skeletons appear under slow network
- ✓ Pending buttons disable and indicate work
- ✓ Content swap causes no jarring shift
- 03
Add error states with retry
Failures must be visible and recoverable.
Preview prompt + verify gate ▾ Hide ▴
Add error handling to every async surface. Requirements: fetch failures render an inline error card with a Retry button that refetches; mutation failures show a toast or inline message with the reason and keep user input intact; remove empty catch blocks; global handler for unexpected errors so nothing is swallowed. Force a failure on each surface to verify.
- ✓ Forced fetch failure shows error + retry
- ✓ Mutation failure preserves user input
- ✓ No empty catch blocks remain
- 04
Add empty states
Empty is a state, not a bug - design it.
Preview prompt + verify gate ▾ Hide ▴
Add empty states to every list/collection view. Requirements: an icon or illustration, one sentence explaining why it is empty, and a primary action to fill it (e.g. 'Create your first project'); differentiate 'no data yet' from 'no search results' with appropriate copy; verify each by clearing data or searching nonsense.
- ✓ New-account emptiness is handled
- ✓ No-results emptiness has distinct copy
- ✓ Empty states include a useful action
- 05
States QA sweep
Verify the app under slow, broken, and empty conditions.
Preview prompt + verify gate ▾ Hide ▴
Run the states QA: with throttled network, walk every view (loading verified); with backend killed or forced 500s, walk every fetch and one mutation per form (errors verified, retry works); with a fresh/emptied account, walk every list (empty states verified); rapid-click every async button (single-fire verified). Report PASS/FAIL per surface with fixes applied.
- ✓ Throttled pass completed
- ✓ Forced-failure pass completed
- ✓ Fresh-account empty pass completed
- ✓ All failures fixed