Stany ładowania

Część sekcji Podstawy Next.js ścieżki React w Coddy. Lekcja 26 z 47.

Strona asynchroniczna jest tak szybka, jak jej najwolniejsze ładowanie. Gdy Next.js czeka, na co dokładnie patrzy użytkownik?

Umieść plik loading.jsx obok strony, a odpowiedź brzmi: cokolwiek chcesz.

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

To zwykły komponent z domyślnym eksportem, który nie przyjmuje żadnych propsów:

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

Nigdy nie renderujesz go samodzielnie ani go nie importujesz. Umieszczenie pliku obok strony otacza ją granicą Suspense: Next.js wyświetla loading.jsx w chwili nawigacji, podmienia go na właściwą stronę po zakończeniu operacji await, a otaczający ją układ nigdy nie miga.

Z miejsca, w którym znajduje się plik, wynikają dwie rzeczy:

Obejmuje stronę obok niego i wszystko zagnieżdżone poniżej, dopóki nie przejmie nad nią kontroli głębiej położony plik loading.jsx
Zmienia się tylko strona: nagłówki i nawigacja z układu pozostają na miejscu i nadal można w nie klikać

Zwróć uwagę, czego nie napisano: żadnej flagi ładowania, żadnego stanu ani if (loading). Mechanizmem jest nazwa pliku.

Wyzwanie

Łatwy

app/slow/page.jsx czeka na zakończenie powolnego ładowania, a app/slow/loading.jsx już istnieje, ale jest pusty.

Wewnątrz jego <main> dodaj <p> z id="loading".
Jego tekst musi być dokładnie taki: Loading the special...

Strona i lib/data.js są zablokowane. Testy przechodzą do /slow i sprawdzają ekran zanim dotrą dane.

Spróbuj swoich sił

import './globals.css';

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

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