Show an immediate skeleton
A page waits for server data or code to stream.
Next.js 16+ · Directive
loading
Use loading.js or loading.tsx in an App Router segment to provide instant fallback UI while that segment streams. Next.js automatically places it in a Suspense boundary and swaps in the completed content.
How it works
A loading.js or loading.tsx file defines the fallback UI for its route segment. Next.js places it inside the segment's layout and automatically uses it as the fallback for a Suspense boundary around the page and nested content; the fallback is replaced when the new content finishes streaming.
Syntax
export default function Loading() { return <LoadingUI /> }Returns
A loading UI component rendered as the route segment's Suspense fallback.
Key points
- Create route-level fallback UI with the special loading.js file convention.
- The server can display a fallback immediately while the segment's content streams.
- Once rendering finishes, Next.js replaces the fallback with the loaded content.
- The file's folder determines which route segment receives the loading state.
- The convention creates a Suspense boundary around the segment page and descendants.
- Layouts shared with the destination remain usable during segment loading.
Common mistakes
- The loading component receives no parameters.
- It is a Server Component unless the file opts into client behavior with the use client directive.
- Uncached data in a layout can delay instant navigation; move that fetch to the page or isolate it behind its own Suspense boundary.
Example: Segment loading UI
// app/dashboard/loading.tsx
export default function Loading() {
return <div aria-busy="true">Loading dashboard…</div>
}Place this file in a route-segment folder to show a lightweight fallback while that segment's page and descendants load.
When to use it
Keep transitions responsive
Users navigate between slow route segments.
Communicate loading progress
A segment needs a meaningful placeholder rather than a blank screen.
Interview questions
QHow do you add loading UI for an App Router segment?
Add loading.js or loading.tsx inside the route-segment folder. Next.js automatically nests it in the segment layout and uses it as a Suspense fallback while the page content streams.
Follow-up: How can you keep static layout content visible while only dynamic data waits? Put an explicit Suspense boundary around the dynamic portion instead of placing all content behind the segment-wide fallback.
QWhat navigation behavior does loading.js provide?
The fallback is prefetched, so navigation can feel immediate when prefetching has completed. Navigation is also interruptible, and shared layouts remain interactive while the new segment loads.
Follow-up: What can prevent an immediate transition? Uncached data fetching in a layout can block it; move that work into page.js or give it a separate Suspense boundary.
QWhat are the component and parameter rules for loading UI?
A loading component has no parameters and can be a Server Component by default. Add the use client directive only when the loading UI needs Client Component capabilities.
Follow-up: What does the segment fallback cover? It wraps the page, not-found file, and nested layouts below it in the segment's Suspense boundary.
Related
React SuspenseServer ComponentsClient Componentslayout.jspage.jsnot-found.js