Merged in add-skeleton-allPromo (pull request #216)

<iman> add skeleton to banner promo homepage

Approved-by: trisusilo

1 files changed, 11 insertions, 2 deletions

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 />