diff options
Diffstat (limited to 'src/lib/flashSale/components/FlashSale.jsx')
| -rw-r--r-- | src/lib/flashSale/components/FlashSale.jsx | 13 |
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} /> |