Add skeleton for products slider

2026-05-25 18:18:49 +03:30
parent 32b3bff318
commit 3abc2e2f2f
1 changed files with 52 additions and 39 deletions
@@ -31,7 +31,10 @@ const onSwiper = (swiper: SwiperClass) => {
    <section class="w-full flex flex-col gap-10 md:gap-16 lg:container">
        <div class="w-full flex justify-between items-center max-lg:container">
            <div class="flex gap-2 items-center">
-                <NuxtImg :src="iconImage" class="size-8 sm:size-14" />
+                <NuxtImg
+                    :src="iconImage"
+                    class="size-8 sm:size-14"
+                />
                <span class="text-black typo-h-6 md:typo-h-5 lg:typo-h-4">
                    {{ title }}
                </span>
@@ -69,6 +72,7 @@ const onSwiper = (swiper: SwiperClass) => {
                </button>
            </div>
        </div>
+        <ClientOnly>
            <div class="w-full">
                <Swiper
                    :slides-per-view="1.5"
@@ -108,6 +112,15 @@ const onSwiper = (swiper: SwiperClass) => {
                    </SwiperSlide>
                </Swiper>
            </div>
+            <template #fallback>
+                <div class="w-full grid grid-cols-3 sm:grid-cols-4 gap-6">
+                    <div class="bg-neutral-100 !size-full !rounded-2xl !aspect-square" />
+                    <div class="bg-neutral-100 !size-full !rounded-2xl !aspect-square" />
+                    <div class="bg-neutral-100 !size-full !rounded-2xl !aspect-square" />
+                    <div class="bg-neutral-100 !size-full !rounded-2xl !aspect-square" />
+                </div>
+            </template>
+        </ClientOnly>
    </section>
 </template>