From 3abc2e2f2fc65c0bc18a3644d393b2fd8a9fd64d Mon Sep 17 00:00:00 2001
From: marzban-dev <marzban.dev@gmail.com>
Date: Mon, 25 May 2026 18:18:49 +0330
Subject: [PATCH] Add skeleton for products slider

---
 .../global/product-detail/ProductsSlider.vue  | 91 +++++++++++--------
 1 file changed, 52 insertions(+), 39 deletions(-)

diff --git a/frontend/components/global/product-detail/ProductsSlider.vue b/frontend/components/global/product-detail/ProductsSlider.vue
index c8bf584..218de19 100644
--- a/frontend/components/global/product-detail/ProductsSlider.vue
+++ b/frontend/components/global/product-detail/ProductsSlider.vue
@@ -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,45 +72,55 @@ const onSwiper = (swiper: SwiperClass) => {
                 </button>
             </div>
         </div>
-        <div class="w-full">
-            <Swiper
-                :slides-per-view="1.5"
-                :loop="true"
-                :centered-slides="true"
-                :space-between="24"
-                @swiper="onSwiper"
-                :breakpoints="{
-                    640: {
-                        centeredSlides: true,
-                        slidesPerView: 3,
-                    },
-                    1024: {
-                        centeredSlides: false,
-                        slidesPerView: 4,
-                    },
-                }"
-            >
-                <SwiperSlide
-                    v-for="product in products"
-                    :key="product.id"
+        <ClientOnly>
+            <div class="w-full">
+                <Swiper
+                    :slides-per-view="1.5"
+                    :loop="true"
+                    :centered-slides="true"
+                    :space-between="24"
+                    @swiper="onSwiper"
+                    :breakpoints="{
+                        640: {
+                            centeredSlides: true,
+                            slidesPerView: 3,
+                        },
+                        1024: {
+                            centeredSlides: false,
+                            slidesPerView: 4,
+                        },
+                    }"
                 >
-                    <ProductCard
-                        :id="product.id"
-                        :slug="product.slug"
-                        :title="product.name"
-                        :picture="product.main_image"
-                        :colors="product.colors"
-                        :rate="product.rating"
-                        :dark-layer="true"
-                        :price="product.best_deal_price_before_discount"
-                        :tag="product.best_deal_discount > 0 ? `${product.best_deal_discount}% تخفیف` : undefined"
-                        :price-after="
-                            product.best_deal_discount > 0 ? product.best_deal_price_after_discount : undefined
-                        "
-                    />
-                </SwiperSlide>
-            </Swiper>
-        </div>
+                    <SwiperSlide
+                        v-for="product in products"
+                        :key="product.id"
+                    >
+                        <ProductCard
+                            :id="product.id"
+                            :slug="product.slug"
+                            :title="product.name"
+                            :picture="product.main_image"
+                            :colors="product.colors"
+                            :rate="product.rating"
+                            :dark-layer="true"
+                            :price="product.best_deal_price_before_discount"
+                            :tag="product.best_deal_discount > 0 ? `${product.best_deal_discount}% تخفیف` : undefined"
+                            :price-after="
+                                product.best_deal_discount > 0 ? product.best_deal_price_after_discount : undefined
+                            "
+                        />
+                    </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>