Data Fetching Page Flow
A complete page that handles loading, error, empty, and success states with real decision logic.
Problem this solves
Every data-driven page goes through the same lifecycle: loading, possible failure, empty dataset, or successful render. Most teams handle only the success case and bolt on error handling later. This flow shows how to structure all four states from the start, with clear conditional logic and appropriate user feedback for each.
Use this pattern for any page that fetches data on mount — user lists, order tables, analytics dashboards, audit logs. The four-state model (loading → error/empty/success) covers every real-world outcome.
Interactive demo
Click a button to simulate each state transition.
Click a state above to see the flow in action.
Decision logic
| State | Condition | What the user sees |
|---|---|---|
| Loading | Request in flight | Spinner + descriptive text |
| Error | Request failed (network, 4xx, 5xx) | Error message + retry button |
| Empty | Request succeeded, 0 results | Empty state + call to action |
| Success | Request succeeded, data present | Data table / list / cards |