Yuklash va kutish holatlari

1) Nima uchun kutishni boshqarish

• (1) nima boshlanganligi, (2) qancha vaqt ketishi va (3) biror narsa notoʻgʻri ketganda nima qilish kerakligi.
• Yaxshi yuklash holati xavotirni kamaytiradi, diqqatni jamlaydi va vaqtni tejaydi.

2) Patterni tanlash: skeleton, progress, spinner, streaming

Skeleton - kelajakdagi kontentning tuzilishi ma’lum bo’lganda, lekin ma’lumotlar yo’q. CLS oldini oladi.
Progress bar - hajm yoki bosqichlar ma’lum bo’lganda (masalan, apload, KYC).
Indeterminate progress - davomiyligi noma’lum bo’lganda, lekin jarayon haqiqiy (boshlang’ich).
Spinner - faqat 600-800 ms gacha bo’lgan qisqa indikator sifatida; keyingi - skeleton/progress/matn.
Streaming/partial render - ma’lumotlarni qismlarga (SSR/segmentlar) beramiz va darhol tayyor zonalarni ko’rsatamiz.

Qoidalar: foydalanuvchini «hech narsada» qoldirmang. Agar 1 s dan ortiq bo’lsa - tuzilish va ma’noni bering.

3) Vaqtinchalik chegaralar va budjetlar (mo’ljallar)

≤ 100 ms - shoshilinch vizual javob:’busy’tugmasi/maydonida.
≤ 1000 ms - skeleton/indikator + «Yuklayapmiz» matni....

4) Bir zumda javob beradigan mikro-patternlar

Nazoratni birdaniga’busy’ga o’tkazing (animatsiya ≤ 100 ms), takroriy bosishlarni to’sib qo’ying.
Tugma matnini «Joʻnatamiz»... ga oʻzgartiramiz, «Soʻrov qabul qilindi» tostini koʻrsatamiz (ixtiyoriy).
Fokusni maydonga qaytarishda - natija zonasidagi lokal skeleton.

5) Skeleton «sakrashsiz»

1:1 bo’lajak kontent shaklini chizing: blok balandligi, media nisbatlari (’aspect-ratio’).
Shimmer animatsiyasi: 1200-1600 ms, yorqinlik amplitudasi ≤ 20%, strobsiz.
Katta roʻyxatlarda - virtualizatsiya + DOMdagi skeletonlar sonini cheklash.

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) Taraqqiyot va bosqichlar