Loading, empty, and error states

What you will build

Render loading, empty, success, and failure states explicitly.

Understand the idea first

Render loading, empty, success, and failure states explicitly.

Build it step by step

async function refresh() {
  showStatus('loading');
  try {
    const items = await loadData(endpoint);
    render(items);
    showStatus(items.length ? 'ready' : 'empty');
  } catch (error) {
    showStatus('error', error.message);
  }
}

1. Open the previous project and record its result.
2. Type the example and complete: Trigger success, empty, and error paths; prevent duplicate clicks while loading.
3. Change one input, predict, then verify.
4. Create and repair: Do not swallow errors; show a useful message and preserve debug information.

Read the important lines

• Render loading, empty, success, and failure states explicitly.
• Read input, processing, and output separately.
• Verify another input and an edge case.

Common mistakes and what to check

Practice without copying

Trigger success, empty, and error paths; prevent duplicate clicks while loading.

Completion check

• I produced the required visible result
• I can explain the input, processing, and output
• I tested normal, edge, and failure cases