Web Development · Beginner level

Beginner level · Module 4: Modern JavaScript and Fetching Data · Lesson 3 of 3

Loading, Empty and Error States

Show users what is happening while data loads, when there is none and when something goes wrong.

In this lesson you will

  • Implement loading, empty and error states
  • Add a retry option and a request timeout

Key concepts

loading indicatorempty stateerror state with retryAbortSignal.timeout

The lesson

While data loads, show a short message or skeleton cards so users know something is happening. On slow connections a blank area looks like a broken page.

If the data is empty, say so helpfully: 'No upcoming events — check back next month.' If loading fails, explain it in plain words and offer a Try again button.

Add a timeout so a request on a poor connection does not wait forever: fetch(url, { signal: AbortSignal.timeout(8000) }). Test every state with DevTools throttling, an offline setting and a broken URL.

Step by step

  1. Show a loading message before fetching.
  2. Show an empty state when the array is empty.
  3. Show an error state with a retry button.
  4. Add a timeout and test with throttling and offline mode.

Practice activity

Complete the events feature from the practical activity with all states.

Expected result: Each state appears correctly under throttling, with an empty file, offline and with a broken URL.

Check your understanding

  1. Why show a loading state?

    Show answer

    So users know the page is working, especially on slow connections.

  2. How can a fetch be given a time limit?

    Show answer

    Pass signal: AbortSignal.timeout(milliseconds).

Taught live by an instructor — online or in person. Free course lessons are for self-study and do not lead to a certificate — see registration options.