Ýüklemek we garaşmak ýagdaýlary

1) Näme üçin garaşmagy dolandyrmaly?

• (1) hereketiň başlanandygy, (2) näçe wagt aljakdygy we (3) bir zat nädogry bolsa näme etmelidigi.
• Gowy ýüklemek ýagdaýy duýduryşy peseldýär, ünsi saklaýar we wagt tygşytlaýar.

2) Nusgany saýlamak: skeleton, progress, spinner, streaming

Skeleton - geljekki mazmunyň gurluşy belli bolanda, ýöne maglumat ýok. CLS-iň öňüni alýar.
Progress bar (determinirlenen) - göwrümi ýa-da tapgyrlary belli bolanda (mysal üçin, apload, KYC).
Indeterminate progress - dowamlylygy belli bolmadyk, ýöne hakyky proses (başlangyç).
Spinner - diňe 600-800 ms çenli gysga görkeziji hökmünde; soňra - skeleton/progress/tekst.
Streaming/partial render - maglumatlary böleklere (SSR/segmentler) berýäris we taýýar zolaklary birbada görkezýäris.

Düzgün: ulanyjyňyzy "boş ýerde" goýmaň. 1 s-den köp bolsa - gurluşy we manyny beriň.

3) Wagtlaýyn çäkler we býujetler (görkezmeler)

≤ 100 ms - derrew wizual jogap: 'busy' düwmesinde/meýdançada.
≤ 1000 ms - skeleton/görkeziji + "Ýükleýäris" teksti....

4) Derrew jogap berýän mikro-patternler

Dolandyryşy birbada 'busy' -e geçirýäris (animasiýa ≤ 100 ms), gaýtalanýan basmalary bloklaýarys.
Düwmäniň tekstini "Iberýäris"... bilen üýtgedýäris, "Haýyş kabul edildi" tostuny görkezýäris (goşmaça).
Fokus meýdana gaýdyp gelende - netije zolagynda ýerli skeleton.

5) "Böküşsiz" skeleton

Geljekdäki mazmunyň görnüşini 1:1 çyzyň: bloklaryň beýikligi, media proporsiýalary ('aspect-ratio').
Shimmer animasiýasy: 1200-1600 ms, ýagtylyk amplitudasy ≤ 20%, strobsyz.
Uly sanawlarda - wirtualizasiýa + DOM-daky skeletleriň sanyny çäklendirmek.

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) Ösüş we tapgyrlar