التحدي: بناء عارض مقالات متدفقة مع تشويق

بيان المشكلة

أنت بصدد إنشاء واجهة مستخدم صغيرة لعرض المقالات لمنتج أكبر. يجب أن تكون تجربة المستخدم سلسة ومباشرة: ينبغي أن يرى المستخدمون هيكلاً ثابتاً وبنية مفيدة على الفور، بينما تظهر المناطق الأبطأ تدريجياً مع توفر البيانات والتعليمات البرمجية . استخدمSuspense تحديد الحدود للحفاظ على عمليات إعادة المحاولة محلية، وتصميم هياكل مستقرة التخطيط لـfallback s، ويفضل التحميل المسبق القائم على النية (التحويم/التركيز/التنقل) للوحات الاختيارية بحيث تبدو واجهة المستخدم متدرجة بدلاً من أن تكون متوقفة.

معايير النجاح

• يجب ألا يختفي غلاف النظام في أي وقت. يجب أن يظل التصميم العام (حاوية الشريط الجانبي + حاوية المحتوى الرئيسي + حاوية المساعدة) مثبتًا ومستقرًا بصريًا أثناء جميع حالات التحميل/إعادة المحاولة.

• يجب ألا يؤدي اختيار مقال إلى تباطؤ تحميل الشريط الجانبي أو المعاينة أثناء تحميل الأجزاء الأبطأ. بمجرد ظهور قائمة المقالات، يجب ألا يؤدي اختيار مقال إلى إعادة تعليق/إخفاء الشريط الجانبي. بمجرد ظهور المعاينة (العنوان + ملخص قصير)، يجب أن تبقى ظاهرة أثناء تحميل النص الكامل أو إعادة محاولة التحميل.

يحتوي التطبيق على ثلاث مناطق رئيسية:

• الشريط الجانبي الأيسر (Articles )

  • يقوم بتحميل قائمة بالمقالات.

  • عند تحريك المؤشر فوق مقال ما، يجب ...