Loading States

Part of the Next.js Essentials section of Coddy's React journey — lesson 26 of 47.

An async page is only as fast as its slowest load. While Next.js waits, the user is looking at… what, exactly?

Put a loading.jsx next to the page and the answer is: whatever you want.

app/
    slow/
        page.jsx       the async page
        loading.jsx    shown while it resolves

It's an ordinary component with a default export, and it takes no props:

export default function Loading() {
    return <p>Loading the special…</p>;
}

You never render it yourself and never import it. Dropping the file beside the page wraps that page in a Suspense boundary: Next.js shows loading.jsx the moment you navigate, swaps in the real page when the awaits finish, and the surrounding layout never blinks.

Two things follow from where the file lives:

It covers the page beside it and everything nested below, until a deeper loading.jsx takes over
Only the page swaps: headers and navigation from the layout stay put and stay clickable

Notice what you did not write: no loading flag, no state, no if (loading). The filename is the mechanism.

Challenge

Easy

app/slow/page.jsx waits on a slow load, and app/slow/loading.jsx already exists but is empty.

Inside its <main>, add a <p> with id="loading".
Its text must be exactly Loading the special...

The page and lib/data.js are locked. The tests navigate to /slow and look at the screen before the data arrives.

Try it yourself

import './globals.css';

export const metadata = {
    title: 'My App',
};

export default function RootLayout({ children }) {
    return (
        <html lang="en">
            <body>
                {children}
            </body>
        </html>
    );
}