Loading, Empty & Error States
Design complete page states so a real network or service failure never leaves an ambiguous interface.
What you will learn
- Cover all data states.
- Add route-level loading and errors.
- Make recovery actions clear.
Required states
Every data-backed module should define its state model before implementation.
- Initial loading
- Background refresh
- No results
- Filtered no results
- Partial data
- Recoverable error
- Permission denied
- Success
Route-level files
App Router supports colocated loading.tsx, error.tsx, and not-found.tsx. Use them for route boundaries, then use smaller inline states for individual cards and tables.
text
app/app/orders/loading.tsx
app/app/orders/error.tsx
app/app/orders/not-found.tsxUseful recovery
An error message should say what failed, whether user data is safe, and what the user can do next. Provide Retry only when it can actually repeat the failed operation.