feat: lazy loading the home page invisible images

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 />;
 }

src/Components/Home/FeaturedSection/FeaturedSectionFeatures.jsx

@@ -20,6 +20,7 @@ const FeaturedSectionFeatures = () => {
             title={t(`${featuresTransData}.title`)}
             description={t(`${featuresTransData}.description`)}
             key={id}
+            loading="lazy"
           />
         );
       })}

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}>

src/Components/Home/ThisMonthSection/ThisMonthSection.jsx

@@ -22,7 +22,7 @@ const ThisMonthSection = () => {
         </Link>
       </div>
 
-      <ProductsSlider filterFun={filterThisMonthProducts} />
+      <ProductsSlider filterFun={filterThisMonthProducts} loading="lazy" />
     </section>
   );
 };

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")}

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>

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>

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>

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>