fix slider post and add skeleton

src/components/pages/blog/postsGridViewSlider.tsx

@@ -1,14 +1,58 @@
+// 'use client';
+
+// import { Swiper, SwiperSlide } from 'swiper/react';
+// import { FreeMode } from 'swiper/modules';
+// import 'swiper/css';
+// import 'swiper/css/free-mode';
+// import { IPostThumbResponseData } from '@/app/api/blog/data';
+// import { useTranslations } from 'use-intl';
+// import routeFactory from '@/assets/constants/routeFactory';
+// import { TLocales } from '@/models/layout';
+// import PostThumb from './PostThumb';
+
+// interface Props {
+//   posts: IPostThumbResponseData[];
+//   locale: TLocales;
+// }
+
+// export default function PostsGridViewSlider({ posts, locale }: Props) {
+//   const t = useTranslations();
+//   const routes = routeFactory(t, locale);
+//   return (
+//     <div className="w-full">
+//       <Swiper
+//         modules={[FreeMode]}
+//         freeMode
+//         spaceBetween={16}
+//         breakpoints={{
+//           0: { slidesPerView: 1.1 },
+//           768: { slidesPerView: Math.min(posts.length, 3), spaceBetween: 24 },
+//         }}
+//         className="w-full"
+//       >
+//         {posts.map((post) => (
+//           <SwiperSlide key={post.id} className="w-auto">
+//             <PostThumb post={post} locale={locale} />
+//           </SwiperSlide>
+//         ))}
+//       </Swiper>
+//     </div>
+//   );
+// }
 'use client';
 
+import { useEffect, useState } from 'react';
 import { Swiper, SwiperSlide } from 'swiper/react';
 import { FreeMode } from 'swiper/modules';
 import 'swiper/css';
 import 'swiper/css/free-mode';
+
+import PostThumb from './PostThumb';
 import { IPostThumbResponseData } from '@/app/api/blog/data';
+import { TLocales } from '@/models/layout';
 import { useTranslations } from 'use-intl';
 import routeFactory from '@/assets/constants/routeFactory';
-import { TLocales } from '@/models/layout';
-import PostThumb from './PostThumb';
+import SliderThumbSkeleton from '@/components/layout/sliderSkeleton';
 
 interface Props {
   posts: IPostThumbResponseData[];
@@ -16,8 +60,18 @@ interface Props {
 }
 
 export default function PostsGridViewSlider({ posts, locale }: Props) {
+  const [hasMounted, setHasMounted] = useState(false);
   const t = useTranslations();
   const routes = routeFactory(t, locale);
+
+  useEffect(() => {
+    setHasMounted(true);
+  }, []);
+
+  if (!hasMounted) {
+    return <SliderThumbSkeleton count={3} />;
+  }
+
   return (
     <div className="w-full">
       <Swiper
@@ -26,12 +80,12 @@ export default function PostsGridViewSlider({ posts, locale }: Props) {
         spaceBetween={16}
         breakpoints={{
           0: { slidesPerView: 1.1 },
-          768: { slidesPerView: posts.length, spaceBetween: 24 },
+          768: { slidesPerView: Math.min(posts.length, 3), spaceBetween: 24 },
         }}
         className="w-full"
       >
         {posts.map((post) => (
-          <SwiperSlide key={post.id}>
+          <SwiperSlide key={post.id} className="w-auto">
             <PostThumb post={post} locale={locale} />
           </SwiperSlide>
         ))}