loading.js

export default function Loading(): React.ReactNode

Dropping a loading file into a folder makes Next.js wrap that segment's page.js, its not-found.js and every nested layout.js in a React <Suspense> boundary, with this component as the fallback. You write no <Suspense> yourself. The fallback is prefetched, so it appears the instant the user clicks, and navigation stays interruptible — they can click away before the destination has finished loading.

Reach for it on any route that awaits data: it converts a dead click into a visible response. Prefer a skeleton that mirrors the real layout over a bare spinner.

What trips people up

• It cannot cover the layout in its own segment. loading.js nests inside layout.js, so an uncached fetch or a cookies() call in that layout blocks the navigation and no fallback is shown. Move the fetch into the page, or wrap it in its own <Suspense>.
• It does not wrap error.js or template.js in the same segment.
• Streaming pins the status code to 200. Once the fallback has rendered, headers are already sent — a later notFound() renders 404 UI but cannot change the status. Next.js injects <meta name="robots" content="noindex"> so crawlers are not misled.
• Static export does not support streaming.
• Some browsers buffer the first 1024 bytes, so trivial demo pages can look like nothing streamed.

export default function Loading() {
  // You can add any UI inside Loading, including a Skeleton.
  return <LoadingSkeleton />
}

export default function Loading() {
  return (
    <section aria-busy="true" aria-label="Loading dashboard">
      <div className="skeleton-title" />
      <ul>
        {Array.from({ length: 5 }, (_, i) => (
          <li key={i} className="skeleton-row" />
        ))}
      </ul>
    </section>
  )
}

import { Suspense } from 'react'
import { PostFeed, Weather } from './Components'

export default function Posts() {
  return (
    <section>
      <Suspense fallback={<p>Loading feed...</p>}>
        <PostFeed />
      </Suspense>
      <Suspense fallback={<p>Loading weather...</p>}>
        <Weather />
      </Suspense>
    </section>
  )
}

import { Suspense } from 'react'
import { TeamSwitcher } from './team-switcher'

export default function Layout({ children }: { children: React.ReactNode }) {
  return (
    <div>
      <Suspense fallback={<div className="switcher-skeleton" />}>
        <TeamSwitcher />
      </Suspense>
      {children}
    </div>
  )
}