Add smooth animation on top banner

2 files changed, 26 insertions, 23 deletions

diff --git a/src/core/components/elements/Navbar/NavbarDesktop.jsx b/src/core/components/elements/Navbar/NavbarDesktop.jsx
index d1ff2d58..05ef0fb0 100644
--- a/src/core/components/elements/Navbar/NavbarDesktop.jsx
+++ b/src/core/components/elements/Navbar/NavbarDesktop.jsx
@@ -18,13 +18,9 @@ import { useEffect, useState } from 'react';
 import DesktopView from '../../views/DesktopView';
 import Link from '../Link/Link';
 import NavbarUserDropdown from './NavbarUserDropdown';
-import { TopBannerSkeleton } from '../Skeleton/TopBannerSkeleton';
 
 const Search = dynamic(() => import('./Search'), { ssr: false });
-const TopBanner = dynamic(() => import('./TopBanner'), {
-  ssr: false,
-  loading: () => <TopBannerSkeleton />,
-});
+const TopBanner = dynamic(() => import('./TopBanner'), { ssr: false });
 
 const NavbarDesktop = () => {
   const [isOpenCategory, setIsOpenCategory] = useState(false);
diff --git a/src/core/components/elements/Navbar/TopBanner.jsx b/src/core/components/elements/Navbar/TopBanner.jsx
index a757c260..4342149d 100644
--- a/src/core/components/elements/Navbar/TopBanner.jsx
+++ b/src/core/components/elements/Navbar/TopBanner.jsx
@@ -1,21 +1,28 @@
-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 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';
 
 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;
 
   return (
-    topBanner.isFetched &&
-    topBanner.data?.length > 0 && (
-      <div style={{ backgroundColor: topBanner.data[0]?.backgroundColor || 'transparent' }}>
+    <div
+      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}
@@ -25,9 +32,9 @@ const TopBanner = () => {
             className='object-cover object-center h-full mx-auto'
           />
         </Link>
-      </div>
-    )
-  )
-}
+      )}
+    </div>
+  );
+};
 
-export default TopBanner
+export default TopBanner;