5 files changed, 27 insertions, 3 deletions
diff --git a/src/lib/home/components/CategoryDynamic.jsx b/src/lib/home/components/CategoryDynamic.jsx
index f2d1a16f..b7798a24 100644
--- a/src/lib/home/components/CategoryDynamic.jsx
+++ b/src/lib/home/components/CategoryDynamic.jsx
@@ -33,9 +33,8 @@ const CategoryDynamic = () => {
     };
 
     fetchCategoryData();
-  }, [categoryManagement, categoryData]);
+  }, [categoryManagement.isLoading]);
  
-
   return (
     <div>
         {categoryManagement && categoryManagement.data?.map((category) => {
@@ -83,6 +82,7 @@ const CategoryDynamic = () => {
                                 <NextImage
                                   src={childCategory.image ? childCategory.image : "/images/noimage.jpeg"}
                                   alt={childCategory.name}
+                                  className='p-2 ml-1'
                                   width={40}
                                   height={40}
                                 />
diff --git a/src/lib/home/components/CategoryPilihan.jsx b/src/lib/home/components/CategoryPilihan.jsx
index 6568621c..6dbf771e 100644
--- a/src/lib/home/components/CategoryPilihan.jsx
+++ b/src/lib/home/components/CategoryPilihan.jsx
@@ -16,6 +16,7 @@ const CategoryPilihan = ({ id, categories }) => {
     const { categoryPilihan } = useCategoryPilihan();
     const heroBanner = useQuery('categoryPilihan', bannerApi({ type: 'banner-category-list' }));
       return (
+        categoryPilihan.length > 0 && (
           <section>
             {isDesktop && (
                 <div>
@@ -114,6 +115,8 @@ const CategoryPilihan = ({ id, categories }) => {
                 </div>
             )}
             </section>
+
+        )
   )
 }
 
diff --git a/src/lib/home/components/PreferredBrand.jsx b/src/lib/home/components/PreferredBrand.jsx
index ae12505d..b30fa5c9 100644
--- a/src/lib/home/components/PreferredBrand.jsx
+++ b/src/lib/home/components/PreferredBrand.jsx
@@ -66,7 +66,7 @@ const PreferredBrand = () => {
           </Link>
         )}
       </div>
-      <div className='border rounded border-gray_r-6'>
+      <div className=''>
         {manufactures.isLoading && <PreferredBrandSkeleton />}
         {!manufactures.isLoading && (
           <Swiper {...swiperBanner}>
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