É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 asynchrone est aussi rapide que son chargement le plus lent. Pendant que Next.js attend, que regarde l’utilisateur… 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

Il s’agit d’un composant ordinaire avec une exportation par défaut, et il ne prend aucune prop :

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

Vous ne le rendez jamais vous-même et ne l’importez jamais. Déposer le fichier à côté de la page enveloppe cette page dans une limite Suspense : Next.js affiche loading.jsx dès que vous naviguez, remplace ce contenu par la véritable page lorsque les attentes sont terminées, et la mise en page environnante 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>
    );
}