Suspense لحدود العمليات غير المتزامنة (مفاهيم)

الهدف: استخدم Suspense لتغليف أجزاء واجهة المستخدم التي تُحمّل بشكل غير متزامن. وأثناء الانتظار، اعرض واجهة بديلة (مؤشر تحميل أو هيكل مؤقت).

• الحد: أصغر مساحة تريد تأجيلها
• الواجهة البديلة: ما تريد عرضه أثناء التحميل
• حافظ على قابلية استخدام بقية الشاشة

حمّل مكوّنًا تحميلًا كسولًا باستخدام React.lazy. يعرض Suspense واجهة بديلة صغيرة أثناء "التحميل".

يمكنك تداخل الحدود حتى لا يمنع جزء بطيء جزءًا آخر. ويعرض كل حد واجهته البديلة الخاصة.

• غلّف الجزء الذي يُحمّل فقط
• اختر واجهة بديلة صغيرة ومفيدة (مؤشر تحميل أو هيكل مؤقت)
• استخدم حدودًا متداخلة للمناطق المستقلة

ملاحظات:

• يعمل Suspense مع المكوّنات التي تعلّق التنفيذ (مثل React.lazy ومكتبات البيانات التي تدعم Suspense).
• تُصيَّر الواجهة البديلة أثناء الانتظار؛ لذا تجنّب وضع منطق ثقيل داخل الواجهات البديلة.

مراجعة: غلّف الأجزاء البطيئة باستخدام Suspense، ووفّر واجهة بديلة مفيدة. استخدم حدودًا متداخلة حتى تُحمّل الأجزاء المستقلة بشكل منفصل.