لماذا يهم هذا الدرس؟
فهم واجهة التحميل واستخدامه بصورة صحيحة داخل مشروع App Router. ملفات Loading وError وNot-found عقود UX على مستوى Route؛ تشرح التأخير وتسمح بالتعافي من Render Failures وتفرق المورد المفقود عن Internal Error.
كيف تفكر فيه؟
- في درس واجهة التحميل، النتيجة التي يجب أن تتحقق: Loading UI يجب أن يحافظ على هيكل الصفحة ويعطي المستخدم إشارة فورية.
- في سياق واجهة التحميل، الخطر الذي يجب أن يبقى تحت السيطرة: Spinner عام أوStack Trace مكشوف لا يقدم Recovery Path مفيدًا وقد يكشف تفاصيل التنفيذ.
- تطبيق واجهة التحميل: أضف Loading وRecoverable Error وNot-found إلى Dynamic Route واحدة ثم فعّل كل حالة عمدًا.
تطبيق عملي
في التطبيق الخاص بدرس واجهة التحميل: Loading UI يجب أن يحافظ على هيكل الصفحة ويعطي المستخدم إشارة فورية.
app/dashboard/loading.tsxtsx
export default function Loading() {
return <p>Loading dashboard…</p>;
}جرّب بنفسك
تمرين واجهة التحميل
أضف Loading وRecoverable Error وNot-found إلى Dynamic Route واحدة ثم فعّل كل حالة عمدًا.
- سجل النتيجة المتوقعة قبل التنفيذ
- اختبر حالة صحيحة وحالة فشل مرتبطة بالدرس
- اشرح في سطرين أين يوجد الحد المسؤول عن القرار