Improve home page performance

1 files changed, 12 insertions, 1 deletions

diff --git a/src/lib/flashSale/components/FlashSale.jsx b/src/lib/flashSale/components/FlashSale.jsx
index e4a4a25c..87545d8d 100644
--- a/src/lib/flashSale/components/FlashSale.jsx
+++ b/src/lib/flashSale/components/FlashSale.jsx
@@ -1,21 +1,28 @@
 import { useEffect, useState } from 'react'
 import flashSaleApi from '../api/flashSaleApi'
-import Image from '@/core/components/elements/Image/Image'
+import Image from 'next/image'
 import CountDown from '@/core/components/elements/CountDown/CountDown'
 import productSearchApi from '@/lib/product/api/productSearchApi'
 import ProductSlider from '@/lib/product/components/ProductSlider'
+import { FlashSaleSkeleton } from '../skeleton/FlashSaleSkeleton'
 
 const FlashSale = () => {
   const [flashSales, setFlashSales] = useState(null)
+  const [isLoading, setIsLoading] = useState(true)
 
   useEffect(() => {
     const loadFlashSales = async () => {
       const dataFlashSales = await flashSaleApi()
       setFlashSales(dataFlashSales)
+      setIsLoading(false)
     }
     loadFlashSales()
   }, [])
 
+  if (isLoading) {
+    return <FlashSaleSkeleton />
+  }
+
   return (
     flashSales?.length > 0 && (
       <div className='px-4 sm:px-0 grid grid-cols-1 gap-y-8'>
@@ -30,11 +37,15 @@ const FlashSale = () => {
               <Image
                 src={flashSale.banner}
                 alt={flashSale.name}
+                width={1080}
+                height={192}
                 className='w-full rounded mb-4 hidden sm:block'
               />
               <Image
                 src={flashSale.bannerMobile}
                 alt={flashSale.name}
+                width={256}
+                height={48}
                 className='w-full rounded mb-4 block sm:hidden'
               />
               <FlashSaleProduct flashSaleId={flashSale.pricelistId} />