Բեռնման և սպասման վիճակը

1) Ինչո՞ ւ կառավարել սպասումը

Օգտագործողը պետք է հասկանա երեք բան

(1) որ գործողությունը սկսվեց, (2) որքա՞ ն կզբաղվի և (3) ինչ անել, եթե ինչ-որ բան սխալ չլինի։

Բեռնման լավ վիճակը նվազեցնում է անհանգստությունը, պահում կենտրոնացումը և խնայում ժամանակը։

2) pattern 'skeleton, progress, spinner, streaming

Skeleton-ը, երբ հայտնի է ապագա բովանդակության կառուցվածքը, բայց տվյալներ չկան։ Կանխում է CLS-ը։

Progress bar (դետերմինացված), երբ հայտնի է ծավալը կամ փուլերը (օրինակ ՝ apload, KYC)։

Indeterminate progress, երբ տևողությունը անհայտ է, բայց գործընթացը իրական է (նախաձեռնողականացում)։

Spinner-ը միայն որպես կարճ ցուցիչ մինչև 600-800 ms; հետո 'skeleton/առաջընթաց/տեքստ։

Streaming/partial render - մենք տալիս ենք այս մասերը (SSR/հատվածներ) և անմիջապես ցույց ենք տալիս պատրաստ գոտիները։

Կանոն 'մի թողեք օգտագործողին «դատարկ վայրում»։ Եթե ավելի քան 1 s - տվեք կառուցվածքը և իմաստը։

3) Ժամանակավոր շեմեր և բյուջեներ (ուղեցույցներ)

100 ms - ակնթարթային տեսողական արձագանք '«buby» կոճակի/դաշտի վրա։

1000 ms - skeleton/ցուցիչ + «Բեռնված» տեքստը...

4) Ակնթարթային արձագանքի միկրո-փամփուշտները

Թարգմանությունը վերահսկում էր «buby» -ում անմիջապես (անիմացիա թիվ 100 մզ), արգելափակում ենք կրկնվող տեսահոլովակները։

Կոճակի տեքստը փոխում ենք «Մենք ուղարկում ենք»..., ցույց ենք տալիս «Հարցումը ընդունվել է» (ուղղակիորեն)։

Երբ ֆոկուսը վերադարձնի դաշտում, տեղական skeleton է արդյունքի գոտում։

5) Skeleton առանց «Skeleton»

Նկարեք 1: 1 ապագա բովանդակության ձևը 'բլոկների բարձրությունները, լրատվամիջոցների համամասնությունները («aspox-ratio»)։

Անիմացիա shimmer: 1200-1600 ms, պայծառության ամպլիտուդը 20 տոկոսով, առանց կառուցվածքի։

Մեծ ցուցակներում վիրտուալիզացիան + DFC-ում կմախքների քանակի սահմանափակումն է։

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) Առաջընթաց և փուլեր