Create and implement smooth render

1 files changed, 17 insertions, 18 deletions

diff --git a/src/core/components/elements/Navbar/TopBanner.jsx b/src/core/components/elements/Navbar/TopBanner.jsx
index 4342149d..ff5b1d90 100644
--- a/src/core/components/elements/Navbar/TopBanner.jsx
+++ b/src/core/components/elements/Navbar/TopBanner.jsx
@@ -1,8 +1,8 @@
 import odooApi from '@/core/api/odooApi';
 import Image from 'next/image';
 import { useQuery } from 'react-query';
-import clsxm from '~/libs/clsxm';
 import Link from '../Link/Link';
+import SmoothRender from '~/components/ui/smooth-render';
 
 const TopBanner = () => {
   const topBanner = useQuery({
@@ -13,27 +13,26 @@ const TopBanner = () => {
 
   const backgroundColor = topBanner.data?.[0]?.backgroundColor || 'transparent';
   const hasData = topBanner.data?.length > 0;
+  const data = topBanner.data?.[0] || null;
 
   return (
-    <div
+    <SmoothRender
+      isLoaded={hasData}
+      height={36}
+      duration={700}
+      delay={500}
       style={{ backgroundColor }}
-      className={clsxm('overflow-y-hidden transition-all duration-700', {
-        'h-[40px]': hasData,
-        'h-0': topBanner.isLoading,
-      })}
     >
-      {hasData && (
-        <Link href={topBanner.data[0]?.url}>
-          <Image
-            src={topBanner.data[0].image}
-            alt={topBanner.data[0].name}
-            width={1440}
-            height={40}
-            className='object-cover object-center h-full mx-auto'
-          />
-        </Link>
-      )}
-    </div>
+      <Link href={data?.url}>
+        <Image
+          src={data?.image}
+          alt={data?.name}
+          width={1440}
+          height={40}
+          className='object-cover object-center h-full mx-auto'
+        />
+      </Link>
+    </SmoothRender>
   );
 };