Next.js provides a built-in 'loading.tsx' file that allows you to show an instant loading state using React Suspense while content is being fetched.
Interactive Simulation Engine
Loading State Lifecycle
Watch how the page "fills in" as data resolves.
Executable Code Workbench
page.tsx
Live Code Editor1// app/dashboard/loading.tsx
2export default function Loading() {
3 return <SkeletonCard />
4}
5
6// Next.js automatically wraps 'page.tsx'
7// with a Suspense boundary using this component.Mental Model
It's a placeholder that sits in the exact spot your content will eventually appear, ensuring the user feels the app is responding immediately.
Why This Exists
To improve perceived performance. Instead of a blank screen, users see a skeleton or spinner while the server renders the heavy parts of the page.
Critical Note
"You don't need to manually import the loading component. Next.js automatically applies it to the corresponding page and its children."