3 files changed, 24 insertions, 3 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/lib/transaction/components/Transaction.jsx b/src/lib/transaction/components/Transaction.jsx
index 85f6163b..4d401037 100644
--- a/src/lib/transaction/components/Transaction.jsx
+++ b/src/lib/transaction/components/Transaction.jsx
@@ -853,8 +853,8 @@ const Transaction = ({ id }) => {
                 </div>
               )}
 
-              {transaction?.data?.products?.map((product) => (
-                <div className='flex justify-end mt-4' key={product.id}>
+              {transaction?.data?.products?.length > 0 && (
+                <div className='flex justify-end mt-4'>
                   <div className='w-1/4 grid grid-cols-2 gap-y-3 text-gray_r-12/80'>
                     <div className='text-right'>Subtotal</div>
                     <div className='text-right font-medium'>
@@ -879,7 +879,7 @@ const Transaction = ({ id }) => {
                     </div>
                   </div>
                 </div>
-              ))}
+              )} 
 
               {transaction?.data?.productsRejectLine.length > 0 && (
                 <div className='text-h-sm font-semibold mt-10 mb-4'>