حالات التحميل

جزء من قسم أساسيات Next.js في رحلة React على Coddy. الدرس 26 من 47.

إن الصفحة الواحدة من نوع async تكون سرعتها بتحكّم أبطأ عملية تحميل فيها (`load`). وبينما ينتظر Next.js، ماذا يشاهد المستخدم بالتحديد؟

ضع ملف loading.jsx بجوار الصفحة وستكون النتيجة: أي شيء تريده.

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

إنه مكون عادي بـ `export default` (تصدير افتراضي)، ولا يأخذ أي props:

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

أنت لا تقوم بتصييره بنفسك أبداً ولا تقوم باستيراده أبداً. وضع الملف بجانب الصفحة يغلف تلك الصفحة داخل حجم معلق (Suspense boundary): يقوم Next.js بـ عرض loading.jsx في اللحظة التي تتنقل فيها، ويستبدلها بالصفحة الحقيقية عندما تنتهي عمليات async/الانتظار (awaits)، دون أن ترمش الواجهة الخارجية المحيطة (layout).

ينتج أمران عن المكان الذي يقع فيه الملف:

فهو يغطي الصفحة المجاورة له وكل شيء متداخل أسفله، إلى أن يتولى ملف loading.jsx أعمق المسؤولية
الصفحة فقط هي التي تتغير: بينما تظل الترويسات وعناصر التنقل من المخطط (layout) ثابتة وقابلة للنقر

لاحظ ما لم تقم بـ كتابته: لا علم تحميل (loading flag)، ولا حالة (state)، ولا if (loading). اسم الملف هو آلية العمل نفسها.

التحدي

سهل

ينتظر app/slow/page.jsx عملية load بطيئة، و app/slow/loading.jsx موجود بالفعل ولكنه فارغ.

داخل عنصر <main> الخاص به، أضف <p> مع id="loading".
يجب أن يكون نصه بالضبط Loading the special...

الصفحة و lib/data.js مقفولان. تنتقل الاختبارات إلى /slow وتفحص الشاشة قبل وصول الـ data.

جرّب بنفسك

import './globals.css';

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

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