Жүктөө жана күтүү шарттары

1) Эмне үчүн күтүү башкаруу

• (1) иш-аракет башталды, (2) канча талап кылынат жана (3) бир нерсе туура эмес болсо, эмне кылуу керек.
• Жакшы жүктөө абалы тынчсызданууну азайтат, көңүл бурат жана убакытты үнөмдөйт.

2) үлгү тандоо: skeleton, progress, spinner, агым

Skeleton - келечектеги мазмундун түзүлүшү белгилүү болгондо, бирок эч кандай маалымат жок. CLS алдын алуу.
Progress bar (детерминацияланган) - көлөм же этаптар белгилүү болгондо (мисалы, аплоад, KYC).
Indeterminate progress - узактыгы белгисиз болгондо, бирок процесс реалдуу (инициализация).
Spinner - 600-800 ms чейин кыска көрсөткүч катары гана; андан ары - skeleton/прогресс/текст.
Streaming/partial render - бөлүктөрү менен маалыматтарды берүү (ССР/сегменттер) жана дароо даяр аймактарды көрсөтүү.

Эреже: колдонуучуну "бош жерде" калтырбаңыз. 1 секунддан ашык болсо - структурасын жана маанисин бер.

3) Убактылуу босоголор жана бюджеттер (ориентирлер)

≤ 100 ms - заматта көрүү жооп: баскычы/талаада 'busy'.
≤ 1000 ms - skeleton/көрсөткүч + текст "жүктөп"....

4) Micro-үлгүлөрү тез жооп

Контролду дароо 'busy' ге которуп (анимация ≤ 100 ms), кайталап чыкылдатууларды бөгөттөп.
Баскычтын текстин "Жөнөтүү"... деп өзгөртөбүз, "Өтүнүч кабыл алынды" тостун көрсөтүлүшү (кошумча).
Талаага көңүл бурганда - натыйжа зонасында жергиликтүү скелетон.

5) Skeleton жок "ат"

1:1 келечектеги мазмундун формасын тартыңыз: блоктордун бийиктиги, медиа пропорциялары ('aspect-ratio').
Shimmer Animation: 1200-1600 мс, жаркыраган Amplituda ≤ 20%, Strobe жок.
Чоң тизмелерде - виртуалдаштыруу + 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) Прогресс жана этаптар