Merge pull request #7255 from Fireentity/feat/partners-lazy-loading

Home implement lazy loading for partner images

Author: leecalcote

src/sections/Home/Partners-home/index.js

@@ -1,5 +1,4 @@
-
-import React from "react";
+import React, { useState, useEffect } from "react";
 import { Container, Row } from "../../../reusecore/Layout";
 import SectionTitle from "../../../reusecore/SectionTitle";
 import PartnerItemWrapper from "./partnerSection.style";
@@ -27,6 +26,30 @@ const settings = {
   ]
 };
 
+const LazyPartnerImage = ({ partner }) => {
+  const [imageSrc, setImageSrc] = useState("");
+
+  useEffect(() => {
+    partner.imageLink().then(module => {
+      setImageSrc(module.default);
+    });
+  }, [partner.imageLink]);
+
+  if (!imageSrc) return null;
+
+  return (
+    <img
+      className="partner-image"
+      id={partner.name}
+      loading="lazy"
+      src={imageSrc}
+      alt={partner.name}
+      width={partner.imageWidth}
+      height={partner.imageHeight}
+    />
+  );
+};
+
 const Projects = () => {
   return (
     <PartnerItemWrapper>
@@ -45,7 +68,7 @@ const Projects = () => {
         {partners.map((partner, index) => (
           <Link className="partner-card" to={partner.imageRoute} key={index}>
             <div className={partner.innerDivStyle}>
-              <img className="partner-image" id={partner.name} loading="lazy" src={partner.imageLink} alt={partner.name} width={partner.imageWidth} height={partner.imageHeight} />
+              <LazyPartnerImage partner={partner} />
             </div>
           </Link>
         ))}

src/sections/Home/Partners-home/partners-home-data.js

@@ -1,136 +1,121 @@
-import redhat from "../../../assets/images/partners/redhat_black.svg";
-import uem from "../../../assets/images/partners/uem_black.svg";
-import utaustin from "../../../assets/images/partners/ut-austin_black.svg";
-import citrix from "../../../assets/images/partners/citrix.svg";
-import hashicorp from "../../../assets/images/partners/hashicorp_vertical_black.svg";
-import hpe from "../../../assets/images/partners/hpe_side_black.svg";
-import nitk from "../../../assets/images/partners/nitk_black.svg";
-import rackspace from "../../../assets/images/partners/rackspace_black.svg";
-import intel from "../../../assets/images/partners/intel-grey.svg";
-import vmware from "../../../assets/images/partners/vmware.svg";
-import cncf from "../../../assets/images/partners/cncf/horizontal/black/cncf-black.svg";
-import metabittrading from "../../../assets/images/partners/metabit-trading-logo-gray.svg";
-import digitalocean from "../../../assets/images/partners/digitalocean-black.svg";
-import citibank from "../../../assets/images/partners/citibank_black.svg";
-import ayapay from "../../../assets/images/partners/aya_pay_black.svg";
+// Remove ALL static imports at the top - delete these lines completely
 
 export const partners = [
   {
     name: "Redhat",
-    imageLink: redhat,
+    imageLink: () => import("../../../assets/images/partners/redhat_black.svg"),
     imageRoute: "/partners#redhat",
     innerDivStyle: "partner__block__inner horizontal",
     imageHeight: 90,
     imageWidth: 382,
   },
   {
     name: "Intel",
-    imageLink: intel,
+    imageLink: () => import("../../../assets/images/partners/intel-grey.svg"),
     imageRoute: "/partners#intel",
     innerDivStyle: "partner__block__inner",
     imageHeight: 533,
     imageWidth: 809,
   },
   {
     name: "University of Texas at Austin partnership with Layer5",
-    imageLink: utaustin,
+    imageLink: () => import("../../../assets/images/partners/ut-austin_black.svg"),
     imageRoute: "/partners#utaustin",
     innerDivStyle: "partner__block__inner horizontal",
     imageHeight: 78,
     imageWidth: 278,
   },
   {
     name: "Citrix",
-    imageLink: citrix,
+    imageLink: () => import("../../../assets/images/partners/citrix.svg"),
     imageRoute: "/partners#Citrix",
     innerDivStyle: "partner__block__inner",
     imageHeight: 144,
     imageWidth: 144,
   },
   {
     name: "Hashicorp partnership with Layer5",
-    imageLink: hashicorp,
-    imageRoute:
-      "/company/news/layer5-and-hashicorp-launch-service-mesh-partnership",
+    imageLink: () => import("../../../assets/images/partners/hashicorp_vertical_black.svg"),
+    imageRoute: "/company/news/layer5-and-hashicorp-launch-service-mesh-partnership",
     innerDivStyle: "partner__block__inner",
     imageHeight: 113,
     imageWidth: 113,
   },
   {
     name: "Hewlett-Packard Enterprise",
-    imageLink: hpe,
+    imageLink: () => import("../../../assets/images/partners/hpe_side_black.svg"),
     imageRoute: "/partners#hpe",
     innerDivStyle: "partner__block__inner",
     imageHeight: 69,
     imageWidth: 178,
   },
   {
     name: "National Institute of Technology Karnataka",
-    imageLink: nitk,
+    imageLink: () => import("../../../assets/images/partners/nitk_black.svg"),
     imageRoute: "/partners#nitk",
     innerDivStyle: "partner__block__inner",
     imageHeight: 433,
     imageWidth: 409,
   },
   {
     name: "Rackspace Technology",
-    imageLink: rackspace,
+    imageLink: () => import("../../../assets/images/partners/rackspace_black.svg"),
     imageRoute: "/partners#rackspace",
     innerDivStyle: "partner__block__inner",
     imageHeight: 124,
     imageWidth: 400,
   },
   {
     name: "UEM",
-    imageLink: uem,
+    imageLink: () => import("../../../assets/images/partners/uem_black.svg"),
     imageRoute: "/partners#uem",
     innerDivStyle: "partner__block__inner",
     imageHeight: 164,
     imageWidth: 302,
   },
   {
     name: "VMware",
-    imageLink: vmware,
+    imageLink: () => import("../../../assets/images/partners/vmware.svg"),
     imageRoute: "/partners#VMware",
     innerDivStyle: "partner__block__inner",
     imageHeight: 31,
     imageWidth: 190,
   },
   {
     name: "CNCF",
-    imageLink: cncf,
+    imageLink: () => import("../../../assets/images/partners/cncf/horizontal/black/cncf-black.svg"),
     imageRoute: "/partners#cncf",
     innerDivStyle: "partner__block__inner ",
     imageHeight: 130,
     imageWidth: 120,
   },
   {
     name: "Metabit Trading",
-    imageLink: metabittrading,
+    imageLink: () => import("../../../assets/images/partners/metabit-trading-logo-gray.svg"),
     imageRoute: "/partners#metabittrading",
     innerDivStyle: "partner__block__inner ",
     imageHeight: 130,
     imageWidth: 120,
   },
   {
     name: "DigitalOcean",
-    imageLink: digitalocean,
+    imageLink: () => import("../../../assets/images/partners/digitalocean-black.svg"),
     imageRoute: "/partners#digitalocean",
     innerDivStyle: "partner__block__inner ",
     imageHeight: 533,
     imageWidth: 809,
   },
   {
     name: "Citibank",
-    imageLink: citibank,
+    imageLink: () => import("../../../assets/images/partners/citibank_black.svg"),
     imageRoute: "/partners#citibank",
     innerDivStyle: "partner__block__inner ",
     imageHeight: 130,
     imageWidth: 120,
   },
   {
     name: "Aya Pay",
-    imageLink: ayapay,
+    imageLink: () => import("../../../assets/images/partners/aya_pay_black.svg"),
     imageRoute: "/partners",
     innerDivStyle: "partner__block__inner ",
     imageHeight: 130,