Merged in CR/optimize_performance_2 (pull request #350)

cache localstorage

1 files changed, 31 insertions, 8 deletions

diff --git a/src/lib/home/components/PromotionProgram.jsx b/src/lib/home/components/PromotionProgram.jsx
index ae06bd4d..7433e7f0 100644
--- a/src/lib/home/components/PromotionProgram.jsx
+++ b/src/lib/home/components/PromotionProgram.jsx
@@ -4,15 +4,38 @@ import { bannerApi } from '@/api/bannerApi';
 import useDevice from '@/core/hooks/useDevice';
 import { Swiper, SwiperSlide } from 'swiper/react';
 import BannerPromoSkeleton from '../components/Skeleton/BannerPromoSkeleton';
+import { useEffect, useState } from 'react';
 const { useQuery } = require('react-query');
 const BannerSection = () => {
-  const promotionProgram = useQuery(
+  const { isMobile, isDesktop } = useDevice();
+  const [data, setData] = useState(null);
+  const [shouldFetch, setShouldFetch] = useState(false);
+
+  useEffect(() => {
+    const localData = localStorage.getItem('Homepage_promotionProgram');
+    if (localData) {
+      setData(JSON.parse(localData));
+    }else{
+      setShouldFetch(true);
+    }
+  },[])
+
+  const getPromotionProgram = useQuery(
     'promotionProgram',
-    bannerApi({ type: 'banner-promotion' })
+    bannerApi({ type: 'banner-promotion' }),{
+      enabled: shouldFetch,
+      onSuccess: (data) => {
+        if (data) {
+          localStorage.setItem('Homepage_promotionProgram', JSON.stringify(data));
+          setData(data);
+        }
+      }
+    }
   );
-  const { isMobile, isDesktop } = useDevice();
 
-  if (promotionProgram.isLoading) {
+  const promotionProgram = data
+
+  if (getPromotionProgram?.isLoading && !data) {
     return <BannerPromoSkeleton />;
   }
 
@@ -40,10 +63,10 @@ const BannerSection = () => {
         )}
       </div>
       {isDesktop &&
-        promotionProgram.data &&
-        promotionProgram.data?.length > 0 && (
+        promotionProgram &&
+        promotionProgram?.length > 0 && (
           <div className='grid grid-cols-3 sm:grid-cols-3 gap-4   rounded-md'>
-            {promotionProgram.data?.map((banner) => (
+            {promotionProgram?.map((banner) => (
               <Link key={banner.id} href={banner.url}>
                 <Image
                   width={439}
@@ -60,7 +83,7 @@ const BannerSection = () => {
 
       {isMobile && (
         <Swiper slidesPerView={1.1} spaceBetween={8} freeMode>
-          {promotionProgram.data?.map((banner) => (
+          {promotionProgram?.map((banner) => (
             <SwiperSlide key={banner.id}>
               <Link key={banner.id} href={banner.url}>
                 <Image