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-migrate/modules/product-promo/components/Section.tsx | 11 +++++++----
 1 file changed, 7 insertions(+), 4 deletions(-)

(limited to 'src-migrate/modules')

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