Loading & Error UI

loading.tsx and error.tsx are conventions, not components you import — Next.js finds them automatically for the route segment they sit in and wraps your page with them.

1. loading.tsx — instant loading state

This page intentionally waits ~1.2s before rendering. Navigate away and back (or reload) to see app/loading-errors/loading.tsx appear immediately while the server finishes the real page — no manual isLoading state required.
app/loading-errors/loading.tsx
export default function Loading() {
  return <p>Loading…</p>
}

2. error.tsx — catching errors per route segment

error.tsx must be a Client Component. It receives the thrown error and a function to retry rendering the segment, without taking down the whole app.
app/loading-errors/broken/error.tsx
'use client'

export default function Error({
  error,
  reset,
}: {
  error: Error & { digest?: string }
  reset: () => void
}) {
  return (
    <div>
      <p>Something went wrong: {error.message}</p>
      <button onClick={() => reset()}>Try again</button>
    </div>
  )
}