The states you forgot to design
Every piece of loaded data has four states. Most designs draw one.
A mockup shows the happy path: a list with six nice items in it. Reality has three more states, and users hit all of them.
- Loading: the request is in flight. What is on screen right now?
- Empty: it worked, there is genuinely nothing. A blank area reads as broken.
- Error: it failed. Can the user do anything about it, or just feel bad?
- Success: the one that got designed.
Loading states have a subtlety worth knowing. A spinner that appears for 80 milliseconds and vanishes reads as a flicker and feels worse than nothing. A spinner that appears after a short delay, and once shown stays for a minimum time, feels calm. That is why routers expose exactly those two knobs.
What does a brand new user with no data see here?
The empty state is the first thing every single user experiences, and it is the state most likely to have never been looked at.
What to remember
- Loading, empty, error, success: design all four.
- Empty and error must be visibly different.
- Delay loading indicators slightly, then hold them briefly.
Terms in this lesson
Show field notes toggles a search param the loader reads. With it off, the slow promise is never created, so nothing streams.