מצבי טעינה

חלק מהיחידה היסודות של Next.js במסלול ה-React של Coddy. שיעור 26 מתוך 47.

דף אסינכרוני מהיר רק כמו הטעינה האיטית ביותר שלו. בזמן ש-Next.js ממתין, על מה המשתמש מסתכל… בדיוק?

מקם קובץ loading.jsx לצד הדף, והתשובה היא: כל מה שתרצה.

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

זהו רכיב רגיל עם ייצוא ברירת מחדל, והוא לא מקבל שום מאפיינים (props):

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

אינך מרנדר אותו בעצמך ואינך מייבא אותו. הצבת הקובץ לצד הדף עוטפת את הדף הזה ב־גבול Suspense: Next.js מציג את loading.jsx ברגע שמנווטים לדף, מחליף אותו בדף האמיתי כשההמתנות מסתיימות, והפריסה שמסביב אינה מהבהבת לעולם.

יש שני דברים שנובעים מהמיקום של הקובץ:

הוא מכסה את הדף שלצדו ואת כל מה שמקונן מתחתיו, עד שקובץ 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>
    );
}