États de chargement

Fait partie de la section L'essentiel de Next.js du Journey React de Coddy — leçon 26 sur 47.

Une page `async` n'est aussi rapide que son chargement le plus lent. Pendant que `next` attend, l'utilisateur regarde… quoi, exactement ?

Placez un loading.jsx à côté de la page et la réponse est : tout ce que vous voulez.

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

C'est un composant ordinaire avec un export `default`, et il ne prend aucun prop :

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

Vous ne le rendered jamais vous-même et ne l'importez jamais. Placer le fichier à côté de la page enveloppe cette page dans une limite Suspense (Suspense boundary) : Next.js affiche loading.jsx dès que vous naviguez, le remplace par la vraie page lorsque les instructions await se terminent, et le layout environnant ne clignote jamais.

Deux conséquences découlent de l'emplacement du fichier :

Il couvre la page située à côté de lui ainsi que tout ce qui est imbriqué en dessous, jusqu'à ce qu'un fichier loading.jsx plus profond prenne le relais
Seule la page change : les en-têtes et la navigation du layout restent en place et demeurent cliquables

Remarquez ce que vous n'avez pas écrit : aucun fanion de chargement, aucun état, aucun if (loading). Le nom de fichier est le mécanisme.

Défi

Facile

app/slow/page.jsx attend un chargement lent, et app/slow/loading.jsx existe déjà mais est vide.

À l'intérieur de son <main>, ajoutez un <p> avec id="loading".
Son texte doit être exactement Loading the special...

La page et lib/data.js sont verrouillés. Les tests naviguent vers /slow et regardent l'écran avant que les données n'arrivent.

Essayez vous-même

import './globals.css';

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

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