1 files changed, 34 insertions, 27 deletions
diff --git a/src/core/components/elements/Navbar/TopBanner.jsx b/src/core/components/elements/Navbar/TopBanner.jsx
index a757c260..722a7501 100644
--- a/src/core/components/elements/Navbar/TopBanner.jsx
+++ b/src/core/components/elements/Navbar/TopBanner.jsx
@@ -1,33 +1,40 @@
-import odooApi from '@/core/api/odooApi'
-import { useQuery } from 'react-query'
-import Image from 'next/image'
-import Link from '../Link/Link'
-import { TopBannerSkeleton } from '../Skeleton/TopBannerSkeleton'
+import Image from 'next/image';
+import { useQuery } from 'react-query';
+
+import odooApi from '@/core/api/odooApi';
+import SmoothRender from '~/components/ui/smooth-render';
+import Link from '../Link/Link';
 
 const TopBanner = () => {
-  const fetchTopBanner = async () => await odooApi('GET', '/api/v1/banner?type=top-banner')
-  const topBanner = useQuery('topBanner', fetchTopBanner, { refetchOnWindowFocus: false })
+  const topBanner = useQuery({
+    queryKey: 'topBanner',
+    queryFn: async () => await odooApi('GET', '/api/v1/banner?type=top-banner'),
+    refetchOnWindowFocus: false,
+  });
 
-  if (topBanner.isLoading) {
-    return <TopBannerSkeleton />
-  }
+  const backgroundColor = topBanner.data?.[0]?.backgroundColor || 'transparent';
+  const hasData = topBanner.data?.length > 0;
+  const data = topBanner.data?.[0] || null;
 
   return (
-    topBanner.isFetched &&
-    topBanner.data?.length > 0 && (
-      <div style={{ backgroundColor: topBanner.data[0]?.backgroundColor || 'transparent' }}>
-        <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>
-    )
-  )
-}
+    <SmoothRender
+      isLoaded={hasData}
+      height='36px'
+      duration='700ms'
+      delay='300ms'
+      style={{ backgroundColor }}
+    >
+      <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>
+  );
+};
 
-export default TopBanner
+export default TopBanner;