From c1d08496c92a7bbae7b133ae0cb5322c7eccff70 Mon Sep 17 00:00:00 2001
From: marzban-dev <marzban.dev@gmail.com>
Date: Wed, 3 Jun 2026 20:07:19 +0330
Subject: [PATCH] Add skeleton for categories section

---
 frontend/components/home/Categories.vue | 156 +++++++++++++-----------
 1 file changed, 88 insertions(+), 68 deletions(-)

diff --git a/frontend/components/home/Categories.vue b/frontend/components/home/Categories.vue
index 3d83cec..6b42896 100644
--- a/frontend/components/home/Categories.vue
+++ b/frontend/components/home/Categories.vue
@@ -42,8 +42,12 @@ const onSlideChange = (swiper: SwiperClass) => {
             <span class="text-white typo-h-6 md:typo-h-5 lg:typo-h-4 min-[2000px]:typo-h-2"> دسته بندی ها </span>
         </div>
 
-        <div class="w-full mt-44 lg:mt-64 relative">
+        <div
+            class="w-full relative"
+            :class="swiper_instance ? 'mt-44 lg:mt-64' : 'mt-24'"
+        >
             <NuxtImg
+                v-if="swiper_instance"
                 class="aspect-square w-[210px] sm:w-[240px] md:w-[300px] lg:w-[350px] 2xl:w-[420px] translate-y-[-136px] sm:translate-y-[-156px] md:translate-y-[-195px] lg:translate-y-[-228px] 2xl:translate-y-[-273px] absolute left-1/2 -translate-x-1/2 z-10"
                 :style="{
                     filter: 'drop-shadow(0px 0px 20px rgba(0, 0, 0, 0.4))',
@@ -52,80 +56,96 @@ const onSlideChange = (swiper: SwiperClass) => {
                 fetch-priority="low"
                 src="/img/heymlz/heymlz-category-seat.gif"
             />
-            <Swiper
-                :loop="true"
-                :centered-slides="true"
-                :slides-per-view="1.5"
-                @swiper="onSwiper"
-                @slideChange="onSlideChange"
-                :modules="[EffectCoverflow]"
-                :effect="'coverflow'"
-                :coverflowEffect="{
-                    rotate: 10,
-                    stretch: -100,
-                    depth: 200,
-                    modifier: 1,
-                    slideShadows: true,
-                }"
-                :breakpoints="{
-                    320: {
-                        coverflowEffect: {
-                            stretch: -50,
+
+            <ClientOnly>
+                <Swiper
+                    :loop="true"
+                    :centered-slides="true"
+                    :slides-per-view="1.5"
+                    @swiper="onSwiper"
+                    @slideChange="onSlideChange"
+                    :modules="[EffectCoverflow]"
+                    :effect="'coverflow'"
+                    :coverflowEffect="{
+                        rotate: 10,
+                        stretch: -100,
+                        depth: 200,
+                        modifier: 1,
+                        slideShadows: true,
+                    }"
+                    :breakpoints="{
+                        320: {
+                            coverflowEffect: {
+                                stretch: -50,
+                            },
+                            slidesPerView: 1.75,
+                            centeredSlides: true,
                         },
-                        slidesPerView: 1.75,
-                        centeredSlides: true,
-                    },
-                    640: {
-                        coverflowEffect: {
-                            stretch: -100,
+                        640: {
+                            coverflowEffect: {
+                                stretch: -100,
+                            },
+                            centeredSlides: true,
+                            slidesPerView: 2.65,
                         },
-                        centeredSlides: true,
-                        slidesPerView: 2.65,
-                    },
-                    1024: {
-                        coverflowEffect: {
-                            stretch: -100,
+                        1024: {
+                            coverflowEffect: {
+                                stretch: -100,
+                            },
+                            centeredSlides: true,
+                            slidesPerView: 3.65,
                         },
-                        centeredSlides: true,
-                        slidesPerView: 3.65,
-                    },
-                    2000: {
-                        coverflowEffect: {
-                            stretch: -100,
+                        2000: {
+                            coverflowEffect: {
+                                stretch: -100,
+                            },
+                            centeredSlides: true,
+                            slidesPerView: 4,
                         },
-                        centeredSlides: true,
-                        slidesPerView: 4,
-                    },
-                    3000: {
-                        coverflowEffect: {
-                            stretch: -100,
+                        3000: {
+                            coverflowEffect: {
+                                stretch: -100,
+                            },
+                            centeredSlides: true,
+                            slidesPerView: 6,
                         },
-                        centeredSlides: true,
-                        slidesPerView: 6,
-                    },
-                }"
-            >
-                <SwiperSlide
-                    ref="slideElement"
-                    v-for="(slide, index) in slides"
-                    :key="slide.id"
+                    }"
                 >
-                    <CategoryCard
-                        dark-layer
-                        :id="slide.id"
-                        :slug="slide.slug"
-                        :category="slide.name"
-                        :video="slide.video ?? ''"
-                        :picture="slide.image ?? ''"
-                        :count="slide.product_count"
-                        :isActive="activeIndex === index"
-                        description="توضیحات دسته بندی"
-                    />
-                </SwiperSlide>
-            </Swiper>
+                    <SwiperSlide
+                        ref="slideElement"
+                        v-for="(slide, index) in slides"
+                        :key="slide.id"
+                    >
+                        <CategoryCard
+                            dark-layer
+                            :id="slide.id"
+                            :slug="slide.slug"
+                            :category="slide.name"
+                            :video="slide.video ?? ''"
+                            :picture="slide.image ?? ''"
+                            :count="slide.product_count"
+                            :isActive="activeIndex === index"
+                            description="توضیحات دسته بندی"
+                        />
+                    </SwiperSlide>
+                </Swiper>
+
+                <template #fallback>
+                    <div
+                        class="grid grid-cols-2 md:grid-cols-3 xl:grid-cols-4 min-[3000px]:grid-cols-6 gap-12 lg:gap-20 px-12 lg:px-20"
+                    >
+                        <div class="w-full aspect-square bg-neutral-800/75 rounded-150"></div>
+                        <div class="w-full aspect-square bg-neutral-800/75 rounded-150"></div>
+                        <div class="w-full aspect-square bg-neutral-800/75 rounded-150 max-md:hidden"></div>
+                        <div class="w-full aspect-square bg-neutral-800/75 rounded-150 max-xl:hidden"></div>
+                        <div class="w-full aspect-square bg-neutral-800/75 rounded-150 max-[3000px]:hidden"></div>
+                        <div class="w-full aspect-square bg-neutral-800/75 rounded-150 max-[3000px]:hidden"></div>
+                    </div>
+                </template>
+            </ClientOnly>
 
             <div
-                v-if="!swiper_instance?.isBeginning"
+                v-if="swiper_instance && !swiper_instance?.isBeginning"
                 @click="swiper_instance?.slidePrev()"
                 :style="{
                     right: `calc(50% - ${slideWidth / 2}px - 20px)`,
@@ -139,7 +159,7 @@ const onSlideChange = (swiper: SwiperClass) => {
             </div>
 
             <div
-                v-if="!swiper_instance?.isEnd"
+                v-if="swiper_instance && !swiper_instance?.isEnd"
                 @click="swiper_instance?.slideNext()"
                 :style="{
                     left: `calc(50% - ${slideWidth / 2}px - 20px)`,