دانلود و صبر کنید ایالات

1) چرا مدیریت انتظار

• (1) آنچه که عمل آغاز شده است، (2) چقدر طول می کشد و (3) چه باید بکنید اگر چیزی اشتباه رفت.
• وضعیت بوت خوب باعث کاهش اضطراب، حفظ تمرکز و صرفه جویی در وقت می شود.

2) انتخاب الگو: اسکلت، پیشرفت، اسپینر، جریان

اسکلت - زمانی که ساختار محتوای آینده شناخته شده است، اما هیچ داده ای وجود ندارد. جلوگیری از CLS

Progress bar (قطعی) - هنگامی که حجم یا مراحل شناخته شده است (به عنوان مثال، apload، KYC).
پیشرفت نامشخص - زمانی که مدت زمان ناشناخته است، اما روند واقعی است (مقدار دهی اولیه).
اسپینر - فقط به عنوان یک شاخص کوتاه تا 600-800 میلی ثانیه ؛ بیشتر - اسکلت/پیشرفت/متن.
رندر جریان/جزئی - ما داده ها را در بخش ها (SSR/بخش ها) می دهیم و مناطق به پایان رسید.

قانون: کاربر را در یک فضای خالی رها نکنید. اگر بیش از 1 s - به ساختار و معنی.

3) آستانه زمان و بودجه (معیار)

≤ 100 ms - پاسخ بصری فوری: «مشغول» در دکمه/زمینه.
≤ 1000 ms - اسکلت/شاخص + متن «بار»....

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) پیشرفت و نقاط عطف