add animate on load for smooth render

1 files changed, 3 insertions, 2 deletions

diff --git a/src/components/ui/PopularProduct.jsx b/src/components/ui/PopularProduct.jsx
index 211291c8..9ca3e4ea 100644
--- a/src/components/ui/PopularProduct.jsx
+++ b/src/components/ui/PopularProduct.jsx
@@ -5,6 +5,7 @@ import { useQuery } from 'react-query'
 import { PopularProductSkeleton } from '../skeleton/PopularProductSkeleton'
 import DesktopView from '@/core/components/views/DesktopView'
 import ProductCard from '@/lib/product/components/ProductCard'
+import AnimateOnLoad from './AnimateOnLoad'
 
 const PopularProduct = () => {
   const popularProduct = useQuery('popularProduct', popularProductApi())
@@ -13,7 +14,7 @@ const PopularProduct = () => {
 
   return (
     popularProduct.data && (
-      <>
+      <AnimateOnLoad className='h-full'>
         <MobileView>
           <div className='px-4'>
             <div className='font-medium mb-4'>Produk Banyak Dilihat</div>
@@ -36,7 +37,7 @@ const PopularProduct = () => {
             </div>
           </div>
         </DesktopView>
-      </>
+      </AnimateOnLoad>
     )
   )
 }