Lesson 3 of 8

The four states

Goal

Loading, success, failure and empty results

01

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.

02

Your task

Show all four states in #out, and disable the button while loading.

Checks

5 checks
  1. The loading state appears immediately
  2. The button is disabled while loading
  3. Success shows the list and re-enables the button
  4. An empty result shows a message, not a blank space
  5. Failure shows its message and doesn't leave the button disabled
03

Hints

0/3
Track lessons0 of 8 done

Learn to read JSON, wait for the server to respond, and handle loading and failure states. That's what separates a demo from a product people can rely on.

Intermediate level, 8 lessons, 2 hours in total.

index.html
Preview
index.html100%
–/5

Press “Run and check” to grade your code.

5 checks listed under “Your task”.

Track lessons0 of 8 done

Learn to read JSON, wait for the server to respond, and handle loading and failure states. That's what separates a demo from a product people can rely on.

Intermediate level, 8 lessons, 2 hours in total.