حالات التحميل والخطأ والفراغ والنجاح والواجهات الهيكلية

الهدف: تغطية جميع حالات البيانات لتوفير تجربة مستخدم سلسة.

• التحميل: عرض العناصر الهيكلية
• الخطأ: نص قصير ومفيد
• الفراغ: شرح الحالة واقتراح الإجراء التالي
• النجاح: عرض قائمة أو تفاصيل

تعطي العناصر الهيكلية لمحة عن التخطيط أثناء تحميل البيانات. اجعلها بسيطة وغير لافتة، وتجنّب تغيّر التخطيط عند وصول المحتوى.

حاكِ عملية جلب: اعرض العناصر الهيكلية أثناء التحميل، ثم اعرض القائمة؛ وبدّل الحالة لرؤية مساري الخطأ والفراغ.

ينبغي أن توضّح الحالة الفارغة ما يمكن توقّعه وتقترح خطوة تالية (مثل: «لا توجد عناصر بعد. أضف عنصرًا.»). اجعل النص قصيرًا وودودًا.

حالة الخطأ: اعرض رسالة موجزة وخيارًا لإعادة المحاولة. لا تعرض آثار التتبّع الخام للأخطاء على الأجهزة المحمولة؛ واجعل الرسالة قابلة للتنفيذ.

ما ينبغي أن تفعله العناصر الهيكلية:

• مطابقة حجم التخطيط النهائي
• استخدام وميض خفيف
• الاختفاء بسرعة

ما لا ينبغي أن تفعله:

• حظر التفاعلات دون داعٍ
• التسبب في قفزات في التخطيط

مراجعة: غطِّ حالات loading وerror وempty وsuccess. استخدم عناصر هيكلية خفيفة أثناء التحميل، وحافظ على قِصر الرسائل وقابليتها للتنفيذ.