add animate on load for smooth render

1 files changed, 15 insertions, 10 deletions

diff --git a/src/components/ui/HeroBanner.jsx b/src/components/ui/HeroBanner.jsx
index 96bd8917..746de778 100644
--- a/src/components/ui/HeroBanner.jsx
+++ b/src/components/ui/HeroBanner.jsx
@@ -1,16 +1,19 @@
-import DesktopView from '@/core/components/views/DesktopView'
-import MobileView from '@/core/components/views/MobileView'
+// Swiper
 import { Swiper, SwiperSlide } from 'swiper/react'
 import { Pagination, Autoplay } from 'swiper'
 import 'swiper/css'
 import 'swiper/css/pagination'
 import 'swiper/css/autoplay'
+
+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 '@/core/components/elements/Image/Image'
 import { useQuery } from 'react-query'
 import { bannerApi } from '@/api/bannerApi'
 import { HeroBannerSkeleton } from '../skeleton/BannerSkeleton'
+import AnimateOnLoad from './AnimateOnLoad'
 
 const swiperBanner = {
   autoplay: {
@@ -49,15 +52,17 @@ const HeroBanner = () => {
   if (heroBanner.isLoading) return <HeroBannerSkeleton />
 
   return (
-    <>
-      <MobileView>
-        <Swiper {...swiperBannerMobile}>{BannerComponent}</Swiper>
-      </MobileView>
+    heroBanner.data && (
+      <AnimateOnLoad>
+        <MobileView>
+          <Swiper {...swiperBannerMobile}>{BannerComponent}</Swiper>
+        </MobileView>
 
-      <DesktopView>
-        <Swiper {...swiperBannerDesktop}>{BannerComponent}</Swiper>
-      </DesktopView>
-    </>
+        <DesktopView>
+          <Swiper {...swiperBannerDesktop}>{BannerComponent}</Swiper>
+        </DesktopView>
+      </AnimateOnLoad>
+    )
   )
 }