Estados de Carregamento

Parte da seção Essenciais do Next.js do Journey de React da Coddy — lição 26 de 47.

Uma página async é tão rápida quanto o seu carregamento mais lento. Enquanto o Next.js espera, o usuário está olhando para… o quê, exatamente?

Coloque um loading.jsx ao lado da página e a resposta é: o que você quiser.

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

É um componente comum com um export default e não recebe props:

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

Você nunca o renderiza manualmente e nunca o importa. Colocar o arquivo ao lado da página envolve essa página em uma fronteira de Suspense: o Next.js exibe loading.jsx no momento em que você navega, substitui pela página real quando os awaits terminam e o layout ao redor nunca pisca.

Duas coisas decorrem de onde o arquivo fica:

Ele cobre a página ao lado dele e tudo o que estiver aninhado abaixo, até que um loading.jsx mais profundo assuma o controle
Apenas a página é substituída: cabeçalhos e navegação do layout permanecem no lugar e continuam clicáveis

Note o que você não escreveu: nenhum flag de carregamento, nenhum estado, nenhum if (loading). O nome do arquivo é o mecanismo.

Desafio

Fácil

app/slow/page.jsx aguarda um carregamento lento, e app/slow/loading.jsx já existe, mas está vazio.

Dentro do seu <main>, adicione um <p> com id="loading".
Seu texto deve ser exatamente Loading the special...

A página e lib/data.js estão bloqueados. Os testes navegam para /slow e olham para a tela antes que os dados cheguem.

Experimente você mesmo

import './globals.css';

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

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