Add skeleton for categories section

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,6 +56,8 @@ const onSlideChange = (swiper: SwiperClass) => {
                 fetch-priority="low"
                 src="/img/heymlz/heymlz-category-seat.gif"
             />
+
+            <ClientOnly>
                 <Swiper
                     :loop="true"
                     :centered-slides="true"
@@ -124,8 +130,22 @@ const onSlideChange = (swiper: SwiperClass) => {
                     </SwiperSlide>
                 </Swiper>
 
+                <template #fallback>
                     <div
-                v-if="!swiper_instance?.isBeginning"
+                        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 && !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)`,