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

Часть раздела Основы 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>
    );
}