The loading.js Convention
Instant loading states powered by React Suspense.
Instant fallbacks
The loading.js file allows you to create fallback UI—like a spinner, a progress bar, or a skeleton screen—that is shown to the user immediately upon navigation.
As soon as the user clicks a link, Next.js instantly renders this fallback UI while the actual page content is being generated (usually waiting on an async database query on the server).
Perceived performance
Without a loading state, a user clicking a link might experience a frozen screen for several seconds while the server fetches data. They might click the button multiple times, thinking the app is broken.
loading.js completely solves this by providing immediate visual feedback. The transition happens instantly, vastly improving the perceived performance of your application.
Automatic Suspense
To use it, just export a default React component from a loading.tsx file.
Under the hood, Next.js takes your loading.js component and uses it as the fallback prop in a React <Suspense> boundary. It automatically wraps this boundary around your page.js.
Simulate Slow Network
Click the button to simulate a slow database query. Watch how the layout renders instantly, the skeleton placeholder kicks in, and the UI remains interactive.
Click Dashboard to Navigate
Click Dashboard. The loading.tsx skeleton appears instantly while waiting for the fake 3-second database query. Notice that during those 3 seconds, you can click Go Home in the navbar—the outer layout.tsx remains fully interactive because Next.js uses React Suspense.
Check yourself
Pick an answer to lock it in, then read why. Getting one wrong is part of how it sticks.
Remember this
loading.jscreates an instant loading UI for a route segment.- It uses React
<Suspense>under the hood. - The surrounding layout remains fully interactive while the inner page is loading.
- Skeleton screens provide the best UX to prevent layout shift.
Done with this concept?
Mark it complete to track your progress. No login needed.