Stati di caricamento

Fa parte della sezione Nozioni essenziali di Next.js del percorso React di Coddy. Lezione 26 di 47.

Una pagina asincrona è veloce solo quanto il suo caricamento più lento. Mentre Next.js attende, l’utente sta guardando… cosa, esattamente?

Metti un loading.jsx accanto alla pagina e la risposta è: quello che vuoi.

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

È un componente ordinario con un'esportazione predefinita e non accetta props:

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

Non la esegui mai direttamente e non la importi mai. Posizionando il file accanto alla pagina, questa viene racchiusa in un confine Suspense: Next.js mostra loading.jsx non appena navighi, visualizza la pagina reale quando gli await sono terminati e il layout circostante non sfarfalla mai.

Dal percorso del file derivano due cose:

Copre la pagina accanto a sé e tutto ciò che è annidato al di sotto, finché un loading.jsx più profondo non prende il suo posto
Viene sostituita solo la pagina: le intestazioni e la navigazione del layout restano al loro posto e rimangono cliccabili

Nota cosa non hai scritto: nessun flag di caricamento, nessuno stato, nessun if (loading). Il nome del file è il meccanismo.

Sfida

Facile

app/slow/page.jsx attende un caricamento lento e app/slow/loading.jsx esiste già, ma è vuoto.

Al suo interno, aggiungi a <main> un <p> con id="loading".
Il testo deve essere esattamente Loading the special...

La pagina e lib/data.js sono bloccati. I test navigano a /slow e guardano lo schermo prima che arrivino i dati.

Provalo tu

import './globals.css';

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

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