jsschools

loading.js

Instant loading UI shown via Suspense while a segment streams.

Since Next 13 (App Router) Spec ↗

Syntax

export default function Loading() { return <Skeleton /> }

Returns

ReactNode — Fallback UI shown while the segment loads.

Examples

// app/dashboard/loading.tsx
export default function Loading() {
  return <div className="skeleton">Loading dashboard...</div>
}

// app/blog/[slug]/loading.tsx
export default function Loading() {
  return (
    <article aria-busy="true">
      <div className="skeleton-title" />
      <div className="skeleton-body" />
    </article>
  )
}

Notes

Next automatically wraps the segment's `page` (and below) in a React `<Suspense>` boundary with this file as the fallback. The shared layout renders immediately while the page streams in. Place it per segment for granular loading states. Server Component by default.

See also