Жүктеу және күту күйі

1) Күтуді басқарудың қажеті

• (1) әрекет не басталды, (2) ол қанша уақыт алады және (3) егер бірдеңе дұрыс болмаса не істеу керек.
• Жақсы жүктеу күйі дабылды азайтады, фокусты ұстап тұрады және уақытты үнемдейді.

2) Паттернді таңдау: skeleton, progress, spinner, streaming

Skeleton - болашақ мазмұнның құрылымы белгілі болғанда, бірақ деректер жоқ. CLS болдырмайды.
Progress bar (детерминирленген) - көлем немесе кезеңдер белгілі болғанда (мысалы, аплоад, KYC).
Indeterminate progress - ұзақтығы белгісіз, бірақ іс жүзінде (бастамалау).
Spinner - 600-800 мс дейін қысқа индикатор ретінде ғана; одан әрі - skeleton/прогресс/мәтін.
Streaming/partial render - деректерді бөліктермен (SSR/сегменттер) береміз және дайын аймақтарды бірден көрсетеміз.

Ереже: пайдаланушыны «бос орында» қалдырмаңыз. Егер 1 с артық болса - құрылым мен мағынаны беріңіз.

3) Уақытша шектер және бюджеттер (бағдарлар)

≤ 100 мс - түймешік/өрістегі 'busy' деген бірден көрнекі жауап.
≤ 1000 мс - skeleton/индикатор + мәтін «жүктеу»....

4) Жылдам жауап беретін микро-үлгілер

Бақылауды бірден 'busy' -ге аударамыз (анимация ≤ 100 мс), қайта басуды бұғаттаймыз.
Түймешіктің мәтінін «Жібереміз»... деп өзгертеміз, «Сұрау қабылданды» тостын көрсетеміз (қосымша).
Өріске назар аудару кезінде - нәтиже аймағындағы жергілікті skeleton.

5) Skeleton «секіріссіз»

1:1 болашақ мазмұн пішінін: блоктар биіктігін, медиа пропорцияларын ('aspect-ratio') сызыңыз.
Shimmer анимациясы: 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) Прогресс және кезеңдер