From de4e52bd63a85b8251d8369866e0b3ffd37b6059 Mon Sep 17 00:00:00 2001
From: Rafi Zadanly <zadanlyr@gmail.com>
Date: Tue, 20 Feb 2024 10:06:07 +0700
Subject: Add smooth animation on top banner

---
 src/core/components/elements/Navbar/TopBanner.jsx | 43 +++++++++++++----------
 1 file changed, 25 insertions(+), 18 deletions(-)

(limited to 'src/core/components/elements/Navbar/TopBanner.jsx')

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;
-- 
cgit v1.2.3


From bb1451372cd847def47fcaed6669a72c664f68e3 Mon Sep 17 00:00:00 2001
From: Rafi Zadanly <zadanlyr@gmail.com>
Date: Tue, 20 Feb 2024 13:53:53 +0700
Subject: Create and implement smooth render

---
 src/core/components/elements/Navbar/TopBanner.jsx | 35 +++++++++++------------
 1 file changed, 17 insertions(+), 18 deletions(-)

(limited to 'src/core/components/elements/Navbar/TopBanner.jsx')

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>
   );
 };
 
-- 
cgit v1.2.3


From 5d3807a89596958a1e23e02ae11f73a2474c3432 Mon Sep 17 00:00:00 2001
From: Rafi Zadanly <zadanlyr@gmail.com>
Date: Tue, 20 Feb 2024 22:27:06 +0700
Subject: Update smooth render function

---
 src/core/components/elements/Navbar/TopBanner.jsx | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

(limited to 'src/core/components/elements/Navbar/TopBanner.jsx')

diff --git a/src/core/components/elements/Navbar/TopBanner.jsx b/src/core/components/elements/Navbar/TopBanner.jsx
index ff5b1d90..ded2857f 100644
--- a/src/core/components/elements/Navbar/TopBanner.jsx
+++ b/src/core/components/elements/Navbar/TopBanner.jsx
@@ -18,9 +18,9 @@ const TopBanner = () => {
   return (
     <SmoothRender
       isLoaded={hasData}
-      height={36}
-      duration={700}
-      delay={500}
+      height='36px'
+      duration='700ms'
+      delay='500ms'
       style={{ backgroundColor }}
     >
       <Link href={data?.url}>
-- 
cgit v1.2.3


From ab61908296a05d303cb9c0d019b5a92002e03972 Mon Sep 17 00:00:00 2001
From: Rafi Zadanly <zadanlyr@gmail.com>
Date: Wed, 21 Feb 2024 09:12:40 +0700
Subject: Fix weight on cart

---
 src/core/components/elements/Navbar/TopBanner.jsx | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

(limited to 'src/core/components/elements/Navbar/TopBanner.jsx')

diff --git a/src/core/components/elements/Navbar/TopBanner.jsx b/src/core/components/elements/Navbar/TopBanner.jsx
index ded2857f..f9ac7032 100644
--- a/src/core/components/elements/Navbar/TopBanner.jsx
+++ b/src/core/components/elements/Navbar/TopBanner.jsx
@@ -1,8 +1,9 @@
-import odooApi from '@/core/api/odooApi';
 import Image from 'next/image';
 import { useQuery } from 'react-query';
-import Link from '../Link/Link';
+
+import odooApi from '@/core/api/odooApi';
 import SmoothRender from '~/components/ui/smooth-render';
+import Link from '../Link/Link';
 
 const TopBanner = () => {
   const topBanner = useQuery({
-- 
cgit v1.2.3


From 4bac265bf958d67dfbd584fd524d661287661368 Mon Sep 17 00:00:00 2001
From: Rafi Zadanly <zadanlyr@gmail.com>
Date: Thu, 22 Feb 2024 16:29:01 +0700
Subject: Improve render on checkout page

---
 src/core/components/elements/Navbar/TopBanner.jsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

(limited to 'src/core/components/elements/Navbar/TopBanner.jsx')

diff --git a/src/core/components/elements/Navbar/TopBanner.jsx b/src/core/components/elements/Navbar/TopBanner.jsx
index f9ac7032..722a7501 100644
--- a/src/core/components/elements/Navbar/TopBanner.jsx
+++ b/src/core/components/elements/Navbar/TopBanner.jsx
@@ -21,7 +21,7 @@ const TopBanner = () => {
       isLoaded={hasData}
       height='36px'
       duration='700ms'
-      delay='500ms'
+      delay='300ms'
       style={{ backgroundColor }}
     >
       <Link href={data?.url}>
-- 
cgit v1.2.3