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 ++++++++++++++++++++++
 .../components/Skeleton/PreferredBrandSkeleton.jsx | 22 +++++++------
 src/lib/product/components/ProductCard.jsx         |  2 +-
 4 files changed, 62 insertions(+), 11 deletions(-)
 create mode 100644 src/lib/flashSale/skeleton/FlashSaleSkeleton.jsx

(limited to 'src/lib')

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 }
diff --git a/src/lib/home/components/Skeleton/PreferredBrandSkeleton.jsx b/src/lib/home/components/Skeleton/PreferredBrandSkeleton.jsx
index 00589342..bd783053 100644
--- a/src/lib/home/components/Skeleton/PreferredBrandSkeleton.jsx
+++ b/src/lib/home/components/Skeleton/PreferredBrandSkeleton.jsx
@@ -1,12 +1,16 @@
-import BrandSkeleton from '@/core/components/elements/Skeleton/BrandSkeleton'
+import useDevice from '@/core/hooks/useDevice'
+import Skeleton from 'react-loading-skeleton'
 
-const PreferredBrandSkeleton = () => (
-  <div className='grid grid-cols-4 gap-x-3'>
-    <BrandSkeleton />
-    <BrandSkeleton />
-    <BrandSkeleton />
-    <BrandSkeleton />
-  </div>
-)
+const PreferredBrandSkeleton = () => {
+  const { isDesktop } = useDevice()
+
+  return (
+    <div className='grid grid-cols-4 md:grid-cols-8 gap-x-3'>
+      {Array.from({ length: isDesktop ? 8 : 4 }, (_, index) => (
+        <Skeleton count={1} height={isDesktop ? 84 : 56} key={index} />
+      ))}
+    </div>
+  )
+}
 
 export default PreferredBrandSkeleton
diff --git a/src/lib/product/components/ProductCard.jsx b/src/lib/product/components/ProductCard.jsx
index a8964310..51a369c4 100644
--- a/src/lib/product/components/ProductCard.jsx
+++ b/src/lib/product/components/ProductCard.jsx
@@ -12,7 +12,7 @@ const ProductCard = ({ product, simpleTitle, variant = 'vertical' }) => {
 
   if (variant == 'vertical') {
     return (
-      <div className='rounded shadow-sm border border-gray_r-4 bg-white h-[350px]'>
+      <div className='rounded shadow-sm border border-gray_r-4 bg-white h-[280px] md:h-[320px]'>
         <Link
           href={createSlug('/shop/product/', product?.name, product?.id)}
           className='border-b border-gray_r-4 relative'
-- 
cgit v1.2.3