شرح صفوف ومحتوى الفقرة
كثيراً ما يؤدي تتبع متغيرات منطقية منفصلة مثل isLoading وisError إلى حالات متناقضة في الواجهة، كنسيان تصفير الخطأ عند الإعادة فيظهر شريط التحميل فوق رسالة الفشل في آن واحد! استبدال الرايات المنفصلة بمتغير نصي موحد status يأخذ إحدى القيم 'loading' | 'error' | 'success' يضمن استحالة تداخل الشاشات. يلخص الجدول التالي تصميم كل حالة:
| حالة الواجهة | الشرط البرمجي الدقيق | متطلبات الوصول وتجربة المستخدم |
|---|---|---|
| التحميل الجاري | status === 'loading' | هيكل حجز مساحة ثابت مع السمة aria-busy="true" |
| فشل الجلب | status === 'error' | رسالة آمنة خالية من التفاصيل الداخلية مع role="alert" وزر إعادة |
| القائمة الفارغة | status === 'success' && items.length === 0 | بطاقة إرشادية محايدة مع زر مسح البحث أو إضافة عنصر |
| عرض السجلات | status === 'success' && items.length > 0 | قائمة دلالية منظمة بمفاتيح item.id المستقرة |
ملخص الدرس
حصاد الدرسمراجعة مركّزة لأهم المفاهيم والقواعد الهندسية التي أتقنتها في هذا الدرس قبل التطبيق العملي
ماذا تعلّمت في هذا الدرس؟
تعلّمت في هذا الدرس هندسة الواجهات غير المتزامنة بحالاتها الأربع المتكاملة عبر هياكل التحميل المتاحة بـ aria-busy، ورسائل الخطأ الآمنة المزودة بزر إعادة المحاولة، ومعالجة القوائم الفارغة بمرونة عبر متغير الحالة الموحد status. الخطوة التالية: انتقل الآن إلى الدرس رقم 39 «إلغاء الطلبات ومنع تضارب الاستجابات بـ AbortController» لمواصلة البناء التراكمي المتدرج في مسار React الحديث.