شرح صفوف ومحتوى الفقرة
لا تترك الواجهات الاحترافية في React المستخدم في حيرة أمام مساحة بيضاء صامتة يتساءل فيها هل لا يزال التحميل جارياً أم تعطل الخادم أم لا توجد نتائج أصلاً. تتطلب كل شاشة تعتمد على بيانات الشبكة تصميم أربع حالات بصرية مستقلة بوضوح:
- حالة التحميل (Loading): تظهر فور انطلاق الطلب لطمأنة المستخدم بأن الجلب جارٍ.
- حالة الخطأ (Error): تظهر عند انقطاع الاتصال أو فشل
response.okمع إتاحة خيار الاستعادة. - حالة الفراغ (Empty): تظهر عندما ينجح الطلب برمز
200 OKلكن المصفوفة خاليةitems.length === 0. - حالة النجاح (Success): تعرض البطاقات أو الجداول الفعلية عند توفر سجل واحد على الأقل.
HTML
if (status === 'loading') {
return <p aria-busy="true">Loading...</p>;
}
if (status === 'error') {
return <p role="alert">{errorMsg}</p>;
}
if (courses.length === 0) {
return <p>No matching courses found.</p>;
}
return <CourseList items={courses} />;