add animate on load for smooth render

1 files changed, 12 insertions, 9 deletions

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>
     )
   )
 }