<iman> add skeleton to banner promo homepage

3 files changed, 32 insertions, 2 deletions

diff --git a/src/lib/home/components/PromotionProgram.jsx b/src/lib/home/components/PromotionProgram.jsx
index 99258d94..c2f76069 100644
--- a/src/lib/home/components/PromotionProgram.jsx
+++ b/src/lib/home/components/PromotionProgram.jsx
@@ -3,11 +3,16 @@ import Image from 'next/image'
 import { bannerApi } from '@/api/bannerApi';
 import useDevice from '@/core/hooks/useDevice'
 import { Swiper, SwiperSlide } from 'swiper/react';
+import  BannerPromoSkeleton from '../components/Skeleton/BannerPromoSkeleton';
 const { useQuery } = require('react-query')
 const BannerSection = () => {
   const promotionProgram = useQuery('promotionProgram', bannerApi({ type: 'banner-promotion' }));
   const { isMobile, isDesktop } = useDevice()
 
+  if (promotionProgram.isLoading) {
+    return <BannerPromoSkeleton />;
+  }
+
   return (
     <div className='px-4 sm:px-0'>
       <div className='flex justify-between items-center mb-4 '>
diff --git a/src/lib/home/components/Skeleton/BannerPromoSkeleton.jsx b/src/lib/home/components/Skeleton/BannerPromoSkeleton.jsx
new file mode 100644
index 00000000..c5f39f19
--- /dev/null
+++ b/src/lib/home/components/Skeleton/BannerPromoSkeleton.jsx
@@ -0,0 +1,16 @@
+import useDevice from '@/core/hooks/useDevice'
+import Skeleton from 'react-loading-skeleton'
+
+const BannerPromoSkeleton = () => {
+  const { isDesktop } = useDevice()
+
+  return (
+    <div className='grid grid-cols-1 md:grid-cols-3 gap-x-3'>
+      {Array.from({ length: isDesktop ? 3 : 1.2 }, (_, index) => (
+        <Skeleton count={1} height={isDesktop ? 60 : 36} key={index} />
+      ))}
+    </div>
+  )
+}
+
+export default BannerPromoSkeleton
diff --git a/src/pages/index.jsx b/src/pages/index.jsx
index 8af963fb..cad5d33b 100644
--- a/src/pages/index.jsx
+++ b/src/pages/index.jsx
@@ -9,6 +9,7 @@ import DesktopView from '@/core/components/views/DesktopView';
 import MobileView from '@/core/components/views/MobileView';
 import { FlashSaleSkeleton } from '@/lib/flashSale/skeleton/FlashSaleSkeleton';
 import PreferredBrandSkeleton from '@/lib/home/components/Skeleton/PreferredBrandSkeleton';
+import BannerPromoSkeleton from '@/lib/home/components/Skeleton/BannerPromoSkeleton';
 import PromotinProgram from '@/lib/promotinProgram/components/HomePage';
 import PagePopupIformation from '~/modules/popup-information';
 import useProductDetail from '~/modules/product-detail/stores/useProductDetail';
@@ -45,7 +46,10 @@ const FlashSale = dynamic(
 );
 
 const ProgramPromotion = dynamic(() =>
-  import('@/lib/home/components/PromotionProgram')
+  import('@/lib/home/components/PromotionProgram'),
+{
+  loading: () => <BannerPromoSkeleton />,
+}
 );
 
 const BannerSection = dynamic(() =>
@@ -113,7 +117,12 @@ export default function Home() {
             </div>
             {!auth?.feature?.soApproval && (
               <>
-                <ProgramPromotion /> <FlashSale />
+              <DelayRender renderAfter={200}>
+                <ProgramPromotion />
+              </DelayRender>
+              <DelayRender renderAfter={200}>
+                <FlashSale />
+              </DelayRender>
               </>
             )}
             <PromotinProgram />