Estados de carga

Parte de la sección Esenciales de Next.js del Journey de React de Coddy — lección 26 de 47.

Una página async es solo tan rápida como su carga más lenta. Mientras Next.js espera, el usuario está mirando… ¿qué, exactamente?

Coloca un loading.jsx al lado de la página y la respuesta es: lo que quieras.

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

Es un componente ordinario con una exportación por defecto (default) y no recibe ninguna prop:

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

Nunca lo renderizas tú mismo y nunca lo importas. Colocar el archivo junto a la página envuelve esa página en un límite de Suspense: Next.js muestra loading.jsx en el momento en que navegas, reemplaza con la página real cuando las promesas finalizan y el layout circundante nunca parpadea.

De la ubicación del archivo se derivan dos cosas:

Cubre la página junto a él y todo lo anidado debajo, hasta que un loading.jsx más profundo tome el control
Solo la página se intercambia: los encabezados y la navegación del layout se mantienen en su lugar y permanecen interactivos

Observa lo que no escribiste: sin indicador de carga, sin estado, sin if (loading). El nombre del archivo es el mecanismo.

Desafío

Fácil

app/slow/page.jsx espera una carga lenta, y app/slow/loading.jsx ya existe pero está vacío.

Dentro de su <main>, añade un <p> con id="loading".
Su texto debe ser exactamente Loading the special...

La página y lib/data.js están bloqueados. Las pruebas navegan a /slow y miran la pantalla antes de que lleguen los datos.

Pruébalo tú mismo

import './globals.css';

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

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