Vue Suspense component ⏳

Kontent yuklanishini kutish (Content loading) - bu web UX ning ajralmas qismidir. Internet tezligini o'ynashi hatto eng tezkor ilovalarni ham sekinlashtirishi mumkin, bu esa foydalanuvchining o'ylash va diqqatini buzish xavfini tug'diradi.

Yaxshi ishlab chiqilgan loading indikatorlar foydalanuvchiga to'gri feedback beradi — ularning so'rovi tizim tomonidan "eshitilganini" tasdiqlaydi, Loading progress ni ko'rsatadi va hatto kutilayotgan vaqt qisman kamaygandek tuyuladi.

Vue 3’s Suspense component

SPA da ayniqsa Loading experience yaxshi bo'lmaydi. Sababi content ni yuklashda juda ko'p Fetch request lar berilgani sababli UI da Spinner ustiga spinner va har xil progress bar larga to'lib ketadi. Shu narsani oldini olish uchun Vue 3 Suspense Component ni taqdim qildi. Suspense component bizga data-fetching qiladigan ko'p componentlarni coordinate qiladigan va Loading experience ni yaxshilaydigan yangi patternni beradi. Keling chuqurroq ko'rib chiqamiz.

Render, then fetch

Odatiy SPA application larda view ko'p componentlardan va nested componentlardan tashkil topgan bo'ladi. Va bu componentlar o'z content ini o'zi yuklashi mumkin. Suspense component siz odatiy loading pattern o'z ichiga mounted da data ni fetch qiladi, shuningdek loading va error ni ham ko'rsatadi:

View ni shunday componentlar bilan to'ldirsak har bir component kerakmas re-render lar yoki layout shift larga olib kelishi mumkin.

Fetch, then render

Suspense esa hamma children component lardagi asinxron data fetching tugamaguncha Component tree ni render qilishni to'xtatib turadi. Componentda data-fetching borligini Suspense u component ni <script async setup> ligidan yoki <script setup> ning ichida top-level await borligidan biladi. E'tibor bering - Loading va Error logikasi individual component tomonidan boshqarilmayapti:

Endi componentlar Viewda har xil vaqtda resolve bo'lmaydi. Suspence Component hamma componentlar o'zining async request larini tugatmagunicha fallback ni ko'rsatadi va qandaydir error chiqsa onErrorCaptured hook ni ishga tushiradi:

Keling Suspense component ni bir nechta amaliy misollarda ko'rib chiqamiz.

Chap tarafda har bir component loading ni o'zi kontrol qilmoqda va content lar har xil vaqtda render bo'lishmoqda.
O'ng tarafda esa birgina Suspense componentini view-level ga qo'yib hamma component uchun umumiy Loading indikatorini ko'rsatib, bir vaqtda render qilishimiz mumkin.

Error larni ham shunda global qilishni iloji bor:

Nested Async component lar uchun Suspense componentni ishlatish

Qachonki bir necha data-fetching component lar component tree da nested bo'lsa, sahifa keraksiz re-render lar ni amalga oshiradi. Suspense esa nested component larni ham asinxron amallarini tugatgunicha kutib turadi va content sahifada bir marotaba render boladi.

Suspense component ni ichida nested component larni yuklanish ketma ketligini kontrol qilamiz

Faraz qilaylik, bizda ma'lum bir component uzoq load boladi. Bu ssenariyda qolgan content ni birinchi ko'rsatib, uzoq load bo'ladigan component larni orqa tomonda yuklanishini kutamiz. Biz bunga shu component ni o'zini alohida Suspense ga o'rashimiz kerak bo'ladi.

Chap tarafda bitta umumiy Suspense ga o'ralgan 2 ta tez yuklanadigan va 1 ta uzoq yuklanadigan component.
O'ng tarafda umumiy Suspense ga o'ralgan 2 ta tez yuklanadigan va o'zi alohida Suspense ga o'ralgan uzoq yuklanadigan component.

Hullas biz Suspense component bizga qanday qilib Loading experience ni yaxshilashga yordam berishini ko'rib chiqdik.

Qo'shimcha savollaringiz bo'lsa sizni o'z kanalimda kutaman.

Hurmat bilan Doniyor (PeaceOfCode)

P.s. Special thanks to Arcana Network Blog for images and Ajith Ranka for practical examples.