From 34004a5d4fa8ecb2bbfc1473c1c0af3e4dc2e569 Mon Sep 17 00:00:00 2001
From: Moamal-2000 <103026211+Moamal-2000@users.noreply.github.com>
Date: Mon, 7 Oct 2024 17:16:26 +0300
Subject: [PATCH] feat: lazy loading the home page invisible images

---
 src/App.jsx                                            |  2 --
 .../Home/FeaturedSection/FeaturedSectionFeatures.jsx   |  1 +
 .../Home/OurProductsSection/OurProductsSection.jsx     |  1 +
 .../Home/ThisMonthSection/ThisMonthSection.jsx         |  2 +-
 src/Components/Home/TodaySection/TodaySection.jsx      |  2 +-
 .../MidComponents/ProductsSlider/ProductsSlider.jsx    |  7 ++++++-
 .../Shared/MiniComponents/Feature/Feature.jsx          | 10 ++++++++--
 src/Components/Shared/Posters/SmallPoster.jsx          |  2 +-
 .../Shared/ProductsCards/ProductCard/ProductCard.jsx   |  2 ++
 9 files changed, 21 insertions(+), 8 deletions(-)

diff --git a/src/App.jsx b/src/App.jsx
index 6ce4bc18..4adce12f 100644
--- a/src/App.jsx
+++ b/src/App.jsx
@@ -1,10 +1,8 @@
 import useStoreWebsiteDataToLocalStorage from "./Hooks/App/useStoreWebsiteDataToLocalStorage";
-import useChangeLangDirOnKeys from "./Hooks/Helper/useChangeLangDirOnKeys";
 import AppRoutes from "./Routes/AppRoutes";
 
 function App() {
   useStoreWebsiteDataToLocalStorage();
-  useChangeLangDirOnKeys();
 
   return <AppRoutes />;
 }
diff --git a/src/Components/Home/FeaturedSection/FeaturedSectionFeatures.jsx b/src/Components/Home/FeaturedSection/FeaturedSectionFeatures.jsx
index 851931a8..4e6abc1d 100644
--- a/src/Components/Home/FeaturedSection/FeaturedSectionFeatures.jsx
+++ b/src/Components/Home/FeaturedSection/FeaturedSectionFeatures.jsx
@@ -20,6 +20,7 @@ const FeaturedSectionFeatures = () => {
             title={t(`${featuresTransData}.title`)}
             description={t(`${featuresTransData}.description`)}
             key={id}
+            loading="lazy"
           />
         );
       })}
diff --git a/src/Components/Home/OurProductsSection/OurProductsSection.jsx b/src/Components/Home/OurProductsSection/OurProductsSection.jsx
index 0029fe97..d21a812d 100644
--- a/src/Components/Home/OurProductsSection/OurProductsSection.jsx
+++ b/src/Components/Home/OurProductsSection/OurProductsSection.jsx
@@ -21,6 +21,7 @@ const OurProductsSection = () => {
       <ExploreProducts
         numOfProducts={7}
         customization={productCardCustomizations.ourProducts}
+        loading="lazy"
       />
 
       <Link to="/products" className={s.viewProductsBtn}>
diff --git a/src/Components/Home/ThisMonthSection/ThisMonthSection.jsx b/src/Components/Home/ThisMonthSection/ThisMonthSection.jsx
index a2947382..cef139a5 100644
--- a/src/Components/Home/ThisMonthSection/ThisMonthSection.jsx
+++ b/src/Components/Home/ThisMonthSection/ThisMonthSection.jsx
@@ -22,7 +22,7 @@ const ThisMonthSection = () => {
         </Link>
       </div>
 
-      <ProductsSlider filterFun={filterThisMonthProducts} />
+      <ProductsSlider filterFun={filterThisMonthProducts} loading="lazy" />
     </section>
   );
 };
diff --git a/src/Components/Home/TodaySection/TodaySection.jsx b/src/Components/Home/TodaySection/TodaySection.jsx
index b13ed463..e0aaeef4 100644
--- a/src/Components/Home/TodaySection/TodaySection.jsx
+++ b/src/Components/Home/TodaySection/TodaySection.jsx
@@ -20,7 +20,7 @@ const TodaySection = () => {
         <EventCounter eventName="flash-sales" timeEvent="3 23 19 56" />
       </div>
 
-      <ProductsSlider filterFun={filterFlashSalesProducts} />
+      <ProductsSlider filterFun={filterFlashSalesProducts} loading="lazy" />
 
       <Link to="/products" className={s.viewProductsBtn}>
         {t("buttons.viewAllProducts")}
diff --git a/src/Components/Shared/MidComponents/ProductsSlider/ProductsSlider.jsx b/src/Components/Shared/MidComponents/ProductsSlider/ProductsSlider.jsx
index e05ed154..ca48b17c 100644
--- a/src/Components/Shared/MidComponents/ProductsSlider/ProductsSlider.jsx
+++ b/src/Components/Shared/MidComponents/ProductsSlider/ProductsSlider.jsx
@@ -5,7 +5,11 @@ import ProductCard from "../../ProductsCards/ProductCard/ProductCard";
 import s from "./ProductsSlider.module.scss";
 import SliderButtons from "./SliderButtons/SliderButtons";
 
-const ProductsSlider = ({ filterFun = () => productsData, customization }) => {
+const ProductsSlider = ({
+  filterFun = () => productsData,
+  customization,
+  loading,
+}) => {
   const filteredProducts = filterFun();
   const sliderRef = useRef();
   const { handleNextBtn, handlePrevBtn } = useSlider(sliderRef);
@@ -23,6 +27,7 @@ const ProductsSlider = ({ filterFun = () => productsData, customization }) => {
             product={product}
             key={product.id}
             customization={customization}
+            loading={loading}
           />
         ))}
       </div>
diff --git a/src/Components/Shared/MiniComponents/Feature/Feature.jsx b/src/Components/Shared/MiniComponents/Feature/Feature.jsx
index 5300ed61..f27d006e 100644
--- a/src/Components/Shared/MiniComponents/Feature/Feature.jsx
+++ b/src/Components/Shared/MiniComponents/Feature/Feature.jsx
@@ -1,10 +1,16 @@
 import s from "./Feature.module.scss";
 
-const Feature = ({ iconImg, iconAlt, title, description }) => {
+const Feature = ({
+  iconImg,
+  iconAlt,
+  title,
+  description,
+  loading = "eager",
+}) => {
   return (
     <div className={s.feature}>
       <div className={s.iconHolder}>
-        <img src={iconImg} alt={iconAlt} />
+        <img src={iconImg} alt={iconAlt} loading={loading} />
       </div>
 
       <b tabIndex="0">{title}</b>
diff --git a/src/Components/Shared/Posters/SmallPoster.jsx b/src/Components/Shared/Posters/SmallPoster.jsx
index cf7a02e6..26b4a636 100644
--- a/src/Components/Shared/Posters/SmallPoster.jsx
+++ b/src/Components/Shared/Posters/SmallPoster.jsx
@@ -7,7 +7,7 @@ const SmallPoster = ({ title, description, posterUrl }) => {
 
   return (
     <div className={s.smallPoster} dir="ltr">
-      <img src={posterUrl} alt="product's poster" />
+      <img src={posterUrl} alt="product's poster" loading="lazy" />
       <div className={s.content}>
         <b>{title}</b>
         <p>{description}</p>
diff --git a/src/Components/Shared/ProductsCards/ProductCard/ProductCard.jsx b/src/Components/Shared/ProductsCards/ProductCard/ProductCard.jsx
index ebaf1136..794d8832 100644
--- a/src/Components/Shared/ProductsCards/ProductCard/ProductCard.jsx
+++ b/src/Components/Shared/ProductsCards/ProductCard/ProductCard.jsx
@@ -19,6 +19,7 @@ const ProductCard = ({
     showColors: false,
   },
   removeFrom,
+  loading = "eager",
 }) => {
   const { name, discount, img, id, addedDate } = product;
   const {
@@ -62,6 +63,7 @@ const ProductCard = ({
             src={img}
             alt={name}
             aria-label={name}
+            loading={loading}
             onClick={navigateToProductDetails}
           />
         </div>