Add Loading/Error States
Eliminate silent failures and frozen screens: add loading, empty, and error states across the whole app.
Add this plan to a project to track work and checks.Open workspace
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