شرح صفوف ومحتوى الفقرة
يؤثر موضع عنصر <Suspense> مباشرة في جودة تجربة المستخدم؛ فوضعه حول الجذر الكلي للتطبيق يخفي الرأس وشريط التنقل خلف شاشة انتظار فارغة بمجرد طلب أي أداة فرعية.
وزّع حدود <Suspense> بذكاء حول منطقة المحتوى المتغيرة فقط ليبقى الهيكل الرئيسي للتطبيق ظاهراً، واجمع البطاقات المترابطة تحت حد واحد إذا أردت ظهورها معاً في لحظة متناسقة:
HTML
function StudioLayout({ tab }) {
return (
<main>
<TopToolbar />
<Suspense fallback={<p>Loading tool...</p>}>
{tab === 'export' ? <LazyExporter /> : <Home />}
</Suspense>
</main>
);
}