added eager and lazy loading

jNembhard · Nov 1, 2023 · 60fe78f · 60fe78f
1 parent 3ad4616
commit 60fe78f
Show file tree

Hide file tree

Showing 11 changed files with 18 additions and 5 deletions.
diff --git a/src/components/molecules/AboutCard/AboutCard.tsx b/src/components/molecules/AboutCard/AboutCard.tsx
@@ -49,9 +49,10 @@ const StyledCardText = styled(Typography)(({ isdark }: { isdark: string }) => ({
 type AboutCardProp = {
   aboutID: string;
   isdark: string;
+  pictureloading: boolean;
 };
 
-const AboutCard = ({ aboutID, isdark }: AboutCardProp) => {
+const AboutCard = ({ aboutID, isdark, pictureloading }: AboutCardProp) => {
   const isBreakpoint767 = useMediaQuery("(min-width: 767px)");
   const isBreakpoint1024 = useMediaQuery("(min-width: 1024px)");
 
@@ -98,6 +99,7 @@ const AboutCard = ({ aboutID, isdark }: AboutCardProp) => {
                     process.env.REACT_APP_CLOUDFRONT_ENDPOINT +
                     images.heroPatternMobile
                   }
+                  loading={pictureloading ? "eager" : "lazy"}
                   alt=""
                 />
               </Box>

diff --git a/src/components/molecules/DesignHeader/DesignHeader.tsx b/src/components/molecules/DesignHeader/DesignHeader.tsx
@@ -28,6 +28,7 @@ const DesignHeader = ({ designID }: DesignHeaderProp) => {
             component="img"
             src={process.env.REACT_APP_CLOUDFRONT_ENDPOINT + images.bgPattern}
             sx={{ ...designHeaderStyles.bgImage }}
+            loading="eager"
             alt=""
           />
           <Box sx={{ ...designHeaderStyles.textContainer }}>

diff --git a/src/components/molecules/Keypoint/Keypoint.tsx b/src/components/molecules/Keypoint/Keypoint.tsx
@@ -35,12 +35,14 @@ const Keypoint = ({ calloutID, image, title, description }: ICallout) => {
               process.env.REACT_APP_CLOUDFRONT_ENDPOINT +
               "assets/shared/desktop/bg-pattern-small-circle.svg"
             }
+            loading="lazy"
             alt=""
           />
         </Box>
         <Box>
           <img
             src={process.env.REACT_APP_CLOUDFRONT_ENDPOINT + image}
+            loading="lazy"
             alt={title}
           />
         </Box>

diff --git a/src/components/molecules/Maps/Maps.tsx b/src/components/molecules/Maps/Maps.tsx
@@ -76,6 +76,7 @@ const Maps = () => {
                         process.env.REACT_APP_CLOUDFRONT_ENDPOINT +
                         location.images.desktop
                       }
+                      loading={hashID === "canada" ? "eager" : "lazy"}
                       alt={location.title}
                     />
                   </picture>
@@ -87,6 +88,7 @@ const Maps = () => {
                         process.env.REACT_APP_CLOUDFRONT_ENDPOINT +
                         "assets/shared/desktop/bg-pattern-three-circles.svg"
                       }
+                      loading={hashID === "canada" ? "eager" : "lazy"}
                       alt=""
                     />
                   </Box>

diff --git a/src/components/molecules/Place/Place.tsx b/src/components/molecules/Place/Place.tsx
@@ -26,6 +26,7 @@ const Place = ({ LocationID, images, title, slug }: IPlace) => {
               process.env.REACT_APP_CLOUDFRONT_ENDPOINT +
               "assets/shared/desktop/bg-pattern-small-circle.svg"
             }
+            loading="lazy"
             alt=""
           />
         </Box>

diff --git a/src/components/molecules/Product/Product.tsx b/src/components/molecules/Product/Product.tsx
@@ -36,6 +36,7 @@ const Product = ({ description, image, title }: IProduct) => {
             alt={description}
             sx={{ ...productStyles.cardMedia }}
             image={process.env.REACT_APP_CLOUDFRONT_ENDPOINT + image}
+            loading="lazy"
           />
           <CardContent sx={{ ...productStyles.cardContent }}>
             <Typography

diff --git a/src/components/molecules/home_components/PrimeDesign/PrimeDesign.tsx b/src/components/molecules/home_components/PrimeDesign/PrimeDesign.tsx
@@ -49,6 +49,7 @@ const PrimeDesign = (design: PrimeDesignProp) => {
               />
               <Box
                 component="img"
+                loading="lazy"
                 sx={{ ...primeStyles.images }}
                 src={process.env.REACT_APP_CLOUDFRONT_ENDPOINT + images.mobile}
                 alt={title}

diff --git a/src/components/molecules/home_components/SubDesign/SubDesign.tsx b/src/components/molecules/home_components/SubDesign/SubDesign.tsx
@@ -49,6 +49,7 @@ const SubDesign = (design: SubDesignProp) => {
               />
               <Box
                 component="img"
+                loading="lazy"
                 sx={{ ...subStyles.images }}
                 src={process.env.REACT_APP_CLOUDFRONT_ENDPOINT + images.mobile}
                 alt={title}

diff --git a/src/components/organisms/HeroCTA/HeroCTA.tsx b/src/components/organisms/HeroCTA/HeroCTA.tsx
@@ -62,6 +62,7 @@ const HeroCTA = () => {
           <Box>
             <Box
               sx={{ ...heroStyles.bgImage }}
+              loading="eager"
               component="img"
               src={
                 process.env.REACT_APP_CLOUDFRONT_ENDPOINT +
@@ -71,6 +72,7 @@ const HeroCTA = () => {
             />
             <Box
               sx={{ ...heroStyles.image }}
+              loading="eager"
               component="img"
               src={designoPhoneImg}
               alt="designo phone"

diff --git a/src/components/templates/ContactTemplate/ContactTemplate.tsx b/src/components/templates/ContactTemplate/ContactTemplate.tsx
@@ -43,7 +43,7 @@ const ContactTemplate = () => {
         <Box sx={{ ...contactTemplateStyles.wrapper }}>
           <Box component="picture" sx={{ ...contactTemplateStyles.image }}>
             <source media="(min-width: 767px)" srcSet={bgContactDesktop} />
-            <img src={bgContactMobile} alt="" />
+            <img src={bgContactMobile} alt="" loading="eager" />
           </Box>
           <ContactDescription />
           <Form />

diff --git a/src/pages/About.tsx b/src/pages/About.tsx
@@ -22,10 +22,10 @@ const About = () => {
         type="webapp"
       />
       <Box sx={{ ...aboutWrapper }}>
-        <AboutCard aboutID={"about-1"} isdark="true" />
-        <AboutCard aboutID={"about-2"} isdark="false" />
+        <AboutCard aboutID={"about-1"} isdark="true" pictureloading={true} />
+        <AboutCard aboutID={"about-2"} isdark="false" pictureloading={false} />
         <Places />
-        <AboutCard aboutID={"about-3"} isdark="false" />
+        <AboutCard aboutID={"about-3"} isdark="false" pictureloading={false} />
       </Box>
     </>
   );