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>
    );
}