A demo shows the happy path. The product is mostly everything else: the first run with no data, the request that timed out, the field the user is not allowed to edit, the list with one item in it.
We design those states before the populated screen, because they force the questions the populated screen lets you avoid. What does this page mean when it is empty? Who is allowed to fix that? What should the person do next?
The four states every component ships with
- Empty — with the one action that fills it, never a shrug.
- Loading — a pulsing triangle, not a spinner, and never a layout that jumps when data lands.
- Error — what failed, whether it is retryable, and who to ask.
- Disabled — why, and what would enable it.
This is why our design system has an EmptyState component before it has a card. The empty case is the design problem; the full case is mostly typography.
