Add skeleton for products slider

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,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>