Lesson 3 of 8
The four states
- 15 min
- 5 checks
- 3 hints
- Go to task
Goal
Loading, success, failure and empty results
Explanation
Every network request has four states, and if you only show one of them, you're building a demo, not a real product.
The first is loading: if you don't show it, the user thinks the button is broken and clicks it ten times. The second is success. The third is failure, where you show a message that tells the user what to do next. The fourth is success with an empty result, the one people forget most often, because an empty list with no message at all looks like a bug.
Disable the button while loading. It's the simplest way to stop two requests from going out at the same time.
Your task
Show all four states in #out, and disable the button while loading.
Checks
5 checks- The loading state appears immediately
- The button is disabled while loading
- Success shows the list and re-enables the button
- An empty result shows a message, not a blank space
- Failure shows its message and doesn't leave the button disabled