Create and implement smooth render

3 files changed, 65 insertions, 22 deletions

diff --git a/src-migrate/components/ui/smooth-render.tsx b/src-migrate/components/ui/smooth-render.tsx
new file mode 100644
index 00000000..0e9a4096
--- /dev/null
+++ b/src-migrate/components/ui/smooth-render.tsx
@@ -0,0 +1,41 @@
+import React from 'react'
+import clsxm from '~/libs/clsxm'
+
+type Props = {
+  children: React.ReactNode,
+  isLoaded: boolean,
+  height: number,
+  duration?: number
+  delay?: number
+} & React.HTMLProps<HTMLDivElement>
+
+const SmoothRender = (props: Props) => {
+  const {
+    children,
+    isLoaded,
+    height,
+    duration = 0,
+    delay = 0,
+    style,
+    className,
+    ...rest
+  } = props
+
+  return (
+    <div
+      className={clsxm('overflow-y-hidden transition-all', className)}
+      style={{
+        opacity: isLoaded ? 1 : 0,
+        height: isLoaded ? `${height}px` : 0,
+        transitionDuration: `${duration}ms`,
+        transitionDelay: `${delay}ms`,
+        ...style
+      }}
+      {...rest}
+    >
+      {isLoaded && children}
+    </div>
+  )
+}
+
+export default SmoothRender
\ No newline at end of file
diff --git a/src-migrate/modules/product-promo/components/Section.tsx b/src-migrate/modules/product-promo/components/Section.tsx
index 07a5df7b..b3c6e671 100644
--- a/src-migrate/modules/product-promo/components/Section.tsx
+++ b/src-migrate/modules/product-promo/components/Section.tsx
@@ -3,6 +3,7 @@ import style from "../styles/section.module.css"
 import { Button, Skeleton } from '@chakra-ui/react'
 import { useQuery } from 'react-query'
 
+import SmoothRender from "~/components/ui/smooth-render"
 import clsxm from "~/libs/clsxm"
 import { IPromotion } from '~/types/promotion'
 import { useModalStore } from "../stores/useModalStore"
@@ -24,9 +25,11 @@ const ProductPromoSection = ({ productId }: Props) => {
   const { openModal } = useModalStore()
 
   return (
-    <div className={clsxm('w-full overflow-y-hidden transition-all opacity-0 duration-500 h-0', {
-      'h-[450px] opacity-100': promotions?.data && promotions?.data.length > 0,
-    })}>
+    <SmoothRender
+      isLoaded={(promotions?.data && promotions?.data.length > 0) || false}
+      height={450}
+      duration={700}
+    >
       <ProductPromoModal />
 
       {promotions?.data && promotions?.data.length > 0 && (
@@ -51,7 +54,7 @@ const ProductPromoSection = ({ productId }: Props) => {
           </div>
         ))}
       </Skeleton>
-    </div>
+    </SmoothRender>
   )
 }
 
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>
   );
 };