Состояния загрузки

Часть раздела Основы Next.js путешествия по React на Coddy — урок 26 из 47.

Асинхронная страница (async) работает настолько быстро, насколько позволяет её самая медленная загрузка. Пока Next.js ждёт, на что именно смотрит пользователь?

Поместите loading.jsx рядом со страницей, и ответ: всё, что угодно.

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

Это обычный компонент с экспортом по умолчанию, и он не принимает пропсы:

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

Вы никогда не рендерите его самостоятельно и никогда не импортируете. Размещение этого файла рядом со страницей оборачивает эту страницу в границу Suspense: Next.js показывает loading.jsx в момент перехода, подставляет реальную страницу, когда завершаются await, а окружающий макет никогда не мигает.

Из того, где расположен файл, следует два момента:

Он охватывает страницу рядом с ним и всё, что вложено ниже, пока управление не переймет более глубокий loading.jsx
Меняется только страница: шапки и навигация из макета остаются на месте и остаются кликабельными

Обратите внимание на то, что вы не писали: ни флага загрузки, ни состояния, ни if (loading). Имя файла — это и есть механизм.

Задание

Легко

app/slow/page.jsx ожидает медленной загрузки, а app/slow/loading.jsx уже существует, но пуст.

Внутри его <main> добавьте <p> с id="loading".
Его текст должен быть ровно Loading the special...

Страница и lib/data.js заблокированы. Тесты переходят на /slow и смотрят на экран до того, как поступят данные.

Попробуйте сами

import './globals.css';

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

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