Why this lesson matters

Understand loading ui and use it correctly in an App Router project. Loading, error and not-found files are route-level UX contracts. They let users understand latency, recover from render failures and distinguish missing resources from internal errors.

How to reason about it

  • For Loading UI, the outcome to verify is: Loading UI should preserve layout and provide immediate feedback.
  • In Loading UI, keep this failure controlled: A generic spinner or leaked stack trace gives users no useful recovery path and can expose implementation details.
  • Loading UI practice target: Add loading, recoverable error and not-found states to one dynamic route, then trigger each state deliberately.

Practical walkthrough

In the Loading UI walkthrough: Loading UI should preserve layout and provide immediate feedback.

app/dashboard/loading.tsxtsx
export default function Loading() {
  return <p>Loading dashboard…</p>;
}

Practice it yourself

Practice

Loading UI exercise

Add loading, recoverable error and not-found states to one dynamic route, then trigger each state deliberately.

  • Record the expected result before execution
  • Test one valid path and one lesson-specific failure path
  • Explain in two lines which boundary owns the decision

Summary