Yuklanish holatlari: spinner, skeleton va progress-bar

Qaysi indikatorni tanlash kerak

Asosiy mezon — foydalanuvchi qancha kutadi va ish hajmi ma’lummi. Ko‘pchilik jamoalar tayanadigan mo‘ljallar:

Skeletonlar ro‘yxat va kartochkali ekranlarga, spinnerlar «Saqlash» kabi amallarga, progress-barlar fayl yuklash, eksport, import va generatsiyaga mos keladi.

Seziladigan tezlik

Perceived performance — mahsulot qanchalik tez tuyulishi, haqiqatda necha millisekund sarflashi emas. Uni serverni tezlashtirmasdan yaxshilash mumkin:

• Amalga darhol javob. So‘rov hali ketayotgan bo‘lsa ham, tugma bosilgan zahoti holatini o‘zgartiradi.
• Barqaror joylashuv. Skeleton bloklarning haqiqiy o‘lchamini takrorlaydi, shuning uchun kontent yuklangach «sakramaydi».
• Indikatordan oldin kechikish. Javob tez kelishi mumkin bo‘lsa, spinner darhol emas, qisqa pauzadan keyin (odatda 200–500 ms) ko‘rsatiladi. Ko‘rsatilgan bo‘lsa — miltillamasligi uchun minimal vaqt ushlab turiladi.
• Avval asosiysi. Sarlavha va asosiy ma’lumotlar birinchi keladi, ikkinchi darajalisi keyin yuklanadi.

Optimistik UI

Optimistic UI — interfeys amal natijasini server javobidan oldin ko‘rsatadi. Layk bosdingiz — yurakcha darhol bo‘yaldi, vazifa qo‘shdingiz — u allaqachon ro‘yxatda.

Mos keladi, agar:

• amal deyarli doim muvaffaqiyatli bo‘lsa (layk, «o‘qildi» belgisi, kartochkalarni joyini almashtirish);
• uni oson qaytarish mumkin bo‘lsa.

To‘lovlar, ariza yuborish, savatsiz o‘chirish uchun mos emas — u yerda foydalanuvchi haqiqiy holatni ko‘rishi kerak.

Patternning majburiy qismi — orqaga qaytarish (rollback): server xato qaytarsa, element avvalgi holatiga qaytadi va foydalanuvchi jimgina yo‘qolgan o‘zgarish emas, tushunarli xabarni ko‘radi.

Qisman yuklanish

Ekran kamdan-kam bitta so‘rovda to‘liq yuklanadi. Har bir blok mustaqil ishlay olishi kerak:

• vidjetlar alohida yuklanadi, sekin blok butun ekranni ushlab turmaydi;
• uzun ro‘yxatlarda — pastda indikator yoki «Yana ko‘rsatish» tugmasi bilan qismlab yuklash;
• rasmlar oldindan joy band qiladi va zaglushka yoki xira previyu ko‘rsatadi;
• allaqachon yuklangan ma’lumotni yangilashda eski kontent ekranda qoladi, indikator ustida yoki yonida ko‘rsatiladi — skeletonga qaytilmaydi.

Xatolar va taymautlar

Xato ssenariysiz yuklanish holati — tugallanmagan dizayn. Har bir blok uchun o‘ylab qo‘ying:

• Tarmoq yoki server xatosi: nima bo‘lganini oddiy so‘zlar bilan va «Qayta urinish» tugmasi.
• Taymaut: necha soniyadan keyin kutishni to‘xtatish va foydalanuvchiga nima deyish. Cheksiz spinner — eng yomon variant.
• Uzoq kutish: amal cho‘zilsa, matnni yangilang («Ozgina qoldi, faylni qayta ishlayapmiz»), jarayon tirikligi ko‘rinib tursin.
• Bo‘sh holat: yuklanish muvaffaqiyatli, lekin ma’lumot yo‘q. Bu xato emas, alohida ekran.
• Oflayn: tarmoqsiz nima mavjud va shu vaqtda qilingan amallar bilan nima bo‘ladi.

Dasturchilarga qanday topshirish

Holatlar ish jarayonida o‘ylab topilmasligi uchun ularni maket va spetsifikatsiyada tasvirlang:

1. Har bir ekran va komponent uchun holatlar matritsasi: idle, loading, success, empty, error, partial.
2. Har bir amal uchun indikator turi va u qayerda paydo bo‘lishi.
3. Taymlar: ko‘rsatishdan oldingi kechikish, minimal ko‘rsatish vaqti, taymaut.
4. Dizayn-tizimda haqiqiy kartochkalar o‘lchamidagi skeleton-komponentlar.
5. Xatolar, taymautlar va uzoq kutish uchun matnlar.
6. Optimistik UI’da xatodagi xatti-harakat: rollback qanday ko‘rinadi.
7. Animatsiyalar: davomiyligi va prefers-reduced-motion da o‘chirilishi.

Ko‘p uchraydigan xatolar

• Bitta blokni yangilashda butun ekranga spinner.
• Haqiqiy joylashuvga mos kelmaydigan skeleton.
• Taymautsiz va xato xabarisiz indikator.
• 99% da qotib qoladigan progress-bar — qadamning halol holati yaxshiroq.
• Foydalanuvchi ishlashda davom eta oladigan joyda interfeysni bloklash.