დატვირთვის მდგომარეობა და მოლოდინი

1) რატომ უნდა ვმართოთ ლოდინი?

• (1) რომ მოქმედება დაიწყო (2) რამდენს დასჭირდება ეს და (3) რა უნდა გააკეთოს, თუ რამე არასწორედ წარიმართა.
• დატვირთვის კარგი მდგომარეობა ამცირებს შფოთვას, ინარჩუნებს ფოკუსს და დაზოგავს დროს.

2) ნიმუშის არჩევანი: skeleton, progress, spinner, streaming

Skeleton - როდესაც მომავალი შინაარსის სტრუქტურა ცნობილია, მაგრამ მონაცემები არ არსებობს. ხელს უშლის CLS.
Progress bar (დეტერმინირებული) - როდესაც ცნობილია მოცულობა ან ეტაპი (მაგალითად, აპლოდისმენტი, KYC).
Indeterminate პროგრამა - როდესაც ხანგრძლივობა უცნობია, მაგრამ პროცესი რეალურია (ინიციალიზაცია).
Spinner - მხოლოდ როგორც მოკლე მაჩვენებელი 600-800 ms- მდე; შემდეგი - სკელეტონი/პროგრესი/ტექსტი.
Streaming/partial render - ჩვენ მონაცემებს ვაძლევთ ნაწილებს (SSR/სეგმენტები) და დაუყოვნებლივ ვაჩვენებთ მზა ზონებს.

წესი: ნუ დატოვებთ მომხმარებელს „ნულიდან“. თუ 1 წმ-ზე მეტია, მიეცით სტრუქტურა და მნიშვნელობა.

3) დროებითი ბარიერები და ბიუჯეტები (სახელმძღვანელო)

100 ms - მყისიერი ვიზუალური პასუხი: 'busy' ღილაკზე/ველში.
1000 ms - სკელეტონი/ინდიკატორი + ტექსტი „ატვირთეთ“....

4) მყისიერი პასუხის მიკრო შაბლონები

ჩვენ დაუყოვნებლივ ვაკონტროლებთ „busy“ -ს (ანიმაცია 100 ms), გადაკეტეთ ხელახალი დაწკაპუნება.
ჩვენ ვცვლით ღილაკის ტექსტს „გაგზავნით“..., ვაჩვენებთ სადღეგრძელოს „მოთხოვნა მიღებულია“ (სურვილისამებრ).
მოედანზე ფოკუსის დაბრუნებისას - ადგილობრივი სკელეტონი შედეგის ზონაში.

5) სკელეტონი „ნახტომი“ გარეშე

დახატეთ 1:1 მომავალი შინაარსის ფორმა: ბლოკების სიმაღლე, მედიის პროპორციები („ასპექტი-რატიო“).
Shimmer ანიმაცია: 1200-1600 ms, სიკაშკაშის ამპლიტუდა - 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) წინსვლა და ეტაპები