From 8080c415e466ce29d0f7c29284c3a8537c6b237d Mon Sep 17 00:00:00 2001
From: Rafi Zadanly <zadanlyr@gmail.com>
Date: Mon, 22 May 2023 15:51:50 +0700
Subject: add animate on load for smooth render

---
 src/components/ui/HeroBanner.jsx | 25 +++++++++++++++----------
 1 file changed, 15 insertions(+), 10 deletions(-)

(limited to 'src/components/ui/HeroBanner.jsx')

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>
+    )
   )
 }
 
-- 
cgit v1.2.3