From 16fed2e7d00252f5df3f9b5bdf0a5a2b2a094f76 Mon Sep 17 00:00:00 2001
From: Rafi Zadanly <zadanlyr@gmail.com>
Date: Tue, 8 Aug 2023 10:39:34 +0700
Subject: Improve home page performance

---
 src/lib/flashSale/components/FlashSale.jsx       | 13 ++++++++-
 src/lib/flashSale/skeleton/FlashSaleSkeleton.jsx | 36 ++++++++++++++++++++++++
 2 files changed, 48 insertions(+), 1 deletion(-)
 create mode 100644 src/lib/flashSale/skeleton/FlashSaleSkeleton.jsx

(limited to 'src/lib/flashSale')

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} />
diff --git a/src/lib/flashSale/skeleton/FlashSaleSkeleton.jsx b/src/lib/flashSale/skeleton/FlashSaleSkeleton.jsx
new file mode 100644
index 00000000..e9a200d9
--- /dev/null
+++ b/src/lib/flashSale/skeleton/FlashSaleSkeleton.jsx
@@ -0,0 +1,36 @@
+import useDevice from '@/core/hooks/useDevice'
+import PopularProductSkeleton from '@/lib/home/components/Skeleton/PopularProductSkeleton'
+import Skeleton from 'react-loading-skeleton'
+
+const FlashSaleSkeleton = () => {
+  return (
+    <div className='px-4 md:px-0'>
+      <TitleSkeleton />
+      <div className='my-4'>
+        <BannerSkeleton />
+      </div>
+      <PopularProductSkeleton />
+    </div>
+  )
+}
+
+const TitleSkeleton = () => {
+  return (
+    <div className='w-full md:w-[36%] flex gap-x-4'>
+      <Skeleton containerClassName='block w-1/2' height={24} />
+      <div className='w-1/2 flex gap-x-1'>
+        <Skeleton height={40} containerClassName='w-full' />
+        <Skeleton height={40} containerClassName='w-full' />
+        <Skeleton height={40} containerClassName='w-full' />
+        <Skeleton height={40} containerClassName='w-full' />
+      </div>
+    </div>
+  )
+}
+
+const BannerSkeleton = () => {
+  const { isDesktop } = useDevice()
+  return <Skeleton duration={1.2} height={isDesktop ? 192 : 48} containerClassName='w-full' />
+}
+
+export { FlashSaleSkeleton, TitleSkeleton, BannerSkeleton }
-- 
cgit v1.2.3