Update smooth render function

1 files changed, 42 insertions, 36 deletions

diff --git a/src/components/ui/HeroBanner.jsx b/src/components/ui/HeroBanner.jsx
index 6cf7902c..9a62465d 100644
--- a/src/components/ui/HeroBanner.jsx
+++ b/src/components/ui/HeroBanner.jsx
@@ -1,42 +1,43 @@
 // Swiper
-import { Swiper, SwiperSlide } from 'swiper/react'
-import { Pagination, Autoplay } from 'swiper'
-import 'swiper/css'
-import 'swiper/css/pagination'
-import 'swiper/css/autoplay'
+import { Autoplay, Pagination } from 'swiper';
+import 'swiper/css';
+import 'swiper/css/autoplay';
+import 'swiper/css/pagination';
+import { Swiper, SwiperSlide } from 'swiper/react';
 
-import DesktopView from '@/core/components/views/DesktopView'
-import MobileView from '@/core/components/views/MobileView'
-import { useMemo } from 'react'
-import Link from '@/core/components/elements/Link/Link'
-import Image from 'next/image'
-import { useQuery } from 'react-query'
-import { bannerApi } from '@/api/bannerApi'
-import { HeroBannerSkeleton } from '../skeleton/BannerSkeleton'
+import Image from 'next/image';
+import { useMemo } from 'react';
+import { useQuery } from 'react-query';
+
+import { bannerApi } from '@/api/bannerApi';
+import Link from '@/core/components/elements/Link/Link';
+import DesktopView from '@/core/components/views/DesktopView';
+import MobileView from '@/core/components/views/MobileView';
+import SmoothRender from '~/components/ui/smooth-render';
 
 const swiperBanner = {
   autoplay: {
     delay: 6000,
-    disableOnInteraction: false
+    disableOnInteraction: false,
   },
   modules: [Pagination, Autoplay],
   loop: true,
   className: 'border border-gray_r-6 min-h-full',
-  slidesPerView: 1
-}
+  slidesPerView: 1,
+};
 
 const HeroBanner = () => {
-  const heroBanner = useQuery('heroBanner', bannerApi({ type: 'index-a-1' }))
+  const heroBanner = useQuery('heroBanner', bannerApi({ type: 'index-a-1' }));
 
   const swiperBannerMobile = {
     ...swiperBanner,
-    pagination: { dynamicBullets: true, clickable: true }
-  }
+    pagination: { dynamicBullets: true, clickable: true },
+  };
 
   const swiperBannerDesktop = {
     ...swiperBanner,
-    pagination: { dynamicBullets: false, clickable: true }
-  }
+    pagination: { dynamicBullets: false, clickable: true },
+  };
 
   const BannerComponent = useMemo(() => {
     return heroBanner.data?.map((banner, index) => (
@@ -51,24 +52,29 @@ const HeroBanner = () => {
           />
         </Link>
       </SwiperSlide>
-    ))
-  }, [heroBanner.data])
-
-  if (heroBanner.isLoading) return <HeroBannerSkeleton />
+    ));
+  }, [heroBanner.data]);
 
   return (
-    heroBanner.data && (
-      <>
-        <MobileView>
+    <>
+      <MobileView>
+        <SmoothRender
+          isLoaded={heroBanner.data?.length > 0}
+          height='68vw'
+          duration='750ms'
+          delay='100ms'
+        >
           <Swiper {...swiperBannerMobile}>{BannerComponent}</Swiper>
-        </MobileView>
+        </SmoothRender>
+      </MobileView>
 
-        <DesktopView>
+      <DesktopView>
+        {heroBanner.data?.length > 0 && (
           <Swiper {...swiperBannerDesktop}>{BannerComponent}</Swiper>
-        </DesktopView>
-      </>
-    )
-  )
-}
+        )}
+      </DesktopView>
+    </>
+  );
+};
 
-export default HeroBanner
+export default HeroBanner;