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/HeroBannerSecondary.jsx | 21 ++++++++++++---------
 1 file changed, 12 insertions(+), 9 deletions(-)

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

diff --git a/src/components/ui/HeroBannerSecondary.jsx b/src/components/ui/HeroBannerSecondary.jsx
index b1023990..50db69f8 100644
--- a/src/components/ui/HeroBannerSecondary.jsx
+++ b/src/components/ui/HeroBannerSecondary.jsx
@@ -5,6 +5,7 @@ import { useMemo } from 'react'
 import { useQuery } from 'react-query'
 import { HeroBannerSkeleton } from '../skeleton/BannerSkeleton'
 import { bannerApi } from '@/api/bannerApi'
+import AnimateOnLoad from './AnimateOnLoad'
 
 const HeroBannerSecondary = () => {
   const heroBannerSecondary = useQuery('heroBannerSecondary', bannerApi({ type: 'index-a-2' }))
@@ -19,15 +20,17 @@ const HeroBannerSecondary = () => {
 
   return (
     heroBannerSecondary.data && (
-      <Link href={heroBannerSecondary.data[randomIndex].url} className='h-full'>
-        <Image
-          src={heroBannerSecondary.data[randomIndex].image}
-          width={512}
-          height={1024}
-          alt={heroBannerSecondary.data[randomIndex].name}
-          className='object-cover object-center h-full'
-        />
-      </Link>
+      <AnimateOnLoad className='h-full'>
+        <Link href={heroBannerSecondary.data[randomIndex].url} className='h-full'>
+          <Image
+            src={heroBannerSecondary.data[randomIndex].image}
+            width={512}
+            height={1024}
+            alt={heroBannerSecondary.data[randomIndex].name}
+            className='object-cover object-center h-full'
+          />
+        </Link>
+      </AnimateOnLoad>
     )
   )
 }
-- 
cgit v1.2.3