تنزيل وانتظر الدول

1) لماذا تدبر الانتظار

• (1) ما الذي بدأ الإجراء، (2) كم سيستغرق الأمر و (3) ماذا تفعل إذا حدث خطأ ما.
• تقلل حالة الحذاء الجيدة من القلق وتحافظ على التركيز وتوفر الوقت.

2) اختيار النمط: الهيكل العظمي، التقدم، الدوار، البث

الهيكل العظمي - عندما يكون هيكل المحتوى المستقبلي معروفًا، ولكن لا توجد بيانات. يمنع CLS.
شريط التقدم (قطعي) - عندما يكون الحجم أو المراحل معروفًا (على سبيل المثال، apload، KYC).
التقدم غير المحدد - عندما تكون المدة غير معروفة، ولكن العملية حقيقية (البدء).
Spinner - فقط كمؤشر قصير يصل إلى 600-800 مللي ثانية ؛ علاوة على ذلك - الهيكل العظمي/التقدم/النص.
البث/العرض الجزئي - نعطي البيانات في أجزاء (SSR/sevents) ونعرض المناطق النهائية على الفور.

القاعدة: لا تترك المستخدم في مساحة فارغة. إذا كان أكثر من 1 ثانية - أعط البنية والمعنى.

3) العتبات الزمنية والميزانيات (المعايير)

≤ 100 مللي ثانية - استجابة بصرية فورية: «مشغول» على الزر/الحقل.
≤ 1000 مللي ثانية - هيكل عظمي/مؤشر + نص «حمل».

4) الأنماط الدقيقة للاستجابة الفورية

ننقل التحكم إلى «مشغول» على الفور (الرسوم المتحركة ≤ 100 مللي ثانية)، ونمنع النقرات المتكررة.
قم بتغيير نص الزر إلى «إرسال...»، أظهر الخبز المحمص «طلب مقبول» (اختياري).
عندما يعود التركيز إلى الميدان، يكون الهيكل العظمي المحلي في منطقة النتيجة.

5) هيكل عظمي بدون «قفزات»

ارسم شكل 1:1 من المحتوى المستقبلي: ارتفاعات الكتلة، نسب الوسائط («نسبة الارتفاع إلى الارتفاع»).
وميض الرسوم المتحركة: 1200-1600 مللي ثانية، سعة السطوع ≤ 20٪، بدون رداء.
في القوائم الكبيرة - الافتراضية + الحد من عدد الهياكل العظمية في DOM.

css
.skeleton{position:relative; background:var(--bg-elevated); border-radius:12px; overflow:hidden}
.skeleton::after{
content:"";position:absolute; inset:0;
background:linear-gradient(90deg,transparent,rgba(255,255,255,.1),transparent);
animation:shimmer 1. 4s infinite;
}
@keyframes shimmer{from{transform:translateX(-100%)}to{transform:translateX(100%)}}

6) التقدم والمعالم