Yükləmə və gözləmə halları

1) Niyə gözləntiləri idarə etmək lazımdır

• (1) hərəkət başladı, (2) nə qədər davam edəcək və (3) bir şey səhv olarsa nə etməli.
• Yaxşı yükləmə vəziyyəti həyəcanı azaldır, diqqəti saxlayır və vaxta qənaət edir.

2) Nümunə seçimi: skeleton, progress, spinner, streaming

Skeleton - gələcək məzmunun strukturu məlum olduqda, lakin məlumat yoxdur. CLS qarşısını alır.
Progress bar (determinated) - həcm və ya mərhələlər məlum olduqda (məsələn, appload, KYC).
Indeterminate progress - zaman müddəti məlum deyil, lakin proses realdır (başlanğıc).
Spinner - yalnız 600-800 ms-ə qədər qısa göstərici kimi; sonra - skeleton/tərəqqi/mətn.
Streaming/partial render - verilənləri hissələrlə (SSR/seqmentlər) veririk və dərhal hazır zonaları göstəririk.

Qayda: istifadəçini «boş yerə» qoymayın. 1 saniyədən çox olarsa, bir quruluş və məna verin.

3) Müvəqqəti hədlər və büdcələr

≤ 100 ms - dərhal vizual cavab: düyməsində/sahəsində 'busy'.
≤ 1000 ms - skeleton/göstərici + mətn «Download»....

4) Ani cavab mikro nümunələri

Nəzarəti dərhal 'busy' -ə çeviririk (animasiya ≤ 100 ms), təkrar klikləri bloklayırıq.
Düymənin mətnini «Göndəririk»... ilə dəyişdiririk, «Sorğu qəbul edildi» tostunu göstəririk (isteğe bağlıdır).
Sahəyə geri dönərkən - nəticə zonasında yerli skeleton.

5) Skeleton «atsız»

Gələcək məzmunun 1:1 formasını çəkin: blokların hündürlüyü, media nisbətləri ('aspect-ratio').
Animasiya shimmer: 1200-1600 ms, parlaqlıq genliyi ≤ 20%, strobe olmadan.
Böyük siyahılarda - virtuallaşdırma + DOM-da skeletlərin sayının məhdudlaşdırılması.

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) Tərəqqi və mərhələlər