From 2c7f2e72b2c05af9c015a53b7f08922ea12aaff6 Mon Sep 17 00:00:00 2001
From: Aditya062003 <adityavinay@iitbhilai.ac.in>
Date: Wed, 10 May 2023 00:00:21 +0530
Subject: [PATCH] Added lazyness to all img tags

---
 package-lock.json                      | 11 +++++++++++
 package.json                           |  1 +
 src/components/elements/Article.js     |  4 +++-
 src/components/elements/CredlyBadge.js | 11 +++++++++--
 src/components/sections/AboutMe.js     | 12 ++++++++++--
 src/components/structure/Footer.js     |  4 +++-
 6 files changed, 37 insertions(+), 6 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 389dc80..2ac8173 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -8,6 +8,7 @@
       "name": "personal-website",
       "version": "1.3.3",
       "dependencies": {
+        "lazysizes": "^5.3.2",
         "react": "^18.2.0",
         "react-dom": "^18.2.0",
         "react-scripts": "^5.0.1"
@@ -11025,6 +11026,11 @@
         "language-subtag-registry": "~0.3.2"
       }
     },
+    "node_modules/lazysizes": {
+      "version": "5.3.2",
+      "resolved": "https://registry.npmjs.org/lazysizes/-/lazysizes-5.3.2.tgz",
+      "integrity": "sha512-22UzWP+Vedi/sMeOr8O7FWimRVtiNJV2HCa+V8+peZOw6QbswN9k58VUhd7i6iK5bw5QkYrF01LJbeJe0PV8jg=="
+    },
     "node_modules/leven": {
       "version": "3.1.0",
       "resolved": "https://registry.npmjs.org/leven/-/leven-3.1.0.tgz",
@@ -24362,6 +24368,11 @@
         "language-subtag-registry": "~0.3.2"
       }
     },
+    "lazysizes": {
+      "version": "5.3.2",
+      "resolved": "https://registry.npmjs.org/lazysizes/-/lazysizes-5.3.2.tgz",
+      "integrity": "sha512-22UzWP+Vedi/sMeOr8O7FWimRVtiNJV2HCa+V8+peZOw6QbswN9k58VUhd7i6iK5bw5QkYrF01LJbeJe0PV8jg=="
+    },
     "leven": {
       "version": "3.1.0",
       "resolved": "https://registry.npmjs.org/leven/-/leven-3.1.0.tgz",
diff --git a/package.json b/package.json
index f89126c..90912a5 100644
--- a/package.json
+++ b/package.json
@@ -3,6 +3,7 @@
   "version": "1.3.3",
   "private": true,
   "dependencies": {
+    "lazysizes": "^5.3.2",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-scripts": "^5.0.1"
diff --git a/src/components/elements/Article.js b/src/components/elements/Article.js
index 63524f8..d6c4406 100644
--- a/src/components/elements/Article.js
+++ b/src/components/elements/Article.js
@@ -1,4 +1,6 @@
 import React from "react";
+import "lazysizes";
+import "lazysizes/plugins/attrchange/ls.attrchange";
 
 function Article(props) {
   return (
@@ -20,7 +22,7 @@ function Article(props) {
       </div>
       <div className="card-image">
         <figure className="image">
-          <img width="1000" height="420" src={props.image} alt="" />
+          <img width="1000" className="lazyload" height="420" src={props.image} alt="" />
         </figure>
       </div>
       <div className="card-content">
diff --git a/src/components/elements/CredlyBadge.js b/src/components/elements/CredlyBadge.js
index 655536b..03438d3 100644
--- a/src/components/elements/CredlyBadge.js
+++ b/src/components/elements/CredlyBadge.js
@@ -1,6 +1,13 @@
-import React from "react";
+import React, { useEffect } from "react";
+import "lazysizes";
+import "lazysizes/plugins/attrchange/ls.attrchange";
 
 function CredlyBadge(props) {
+  useEffect(() => {
+    // initialize lazysizes library after component is mounted
+    window.lazySizes.init();
+  }, []);
+
   let imgSrc =
     "https://images.credly.com/size/" + props.width + "x" + props.height;
   imgSrc += "/images/" + props.imageId + "/" + props.imageName;
@@ -9,7 +16,7 @@ function CredlyBadge(props) {
   return (
     <figure className="is-inline-block image">
       <a href={imgLink} target="_blank" rel="noopener noreferrer">
-        <img src={imgSrc} alt={props.badgeName} />
+        <img className="lazyload" data-src={imgSrc} alt={props.badgeName} />
       </a>
     </figure>
   );
diff --git a/src/components/sections/AboutMe.js b/src/components/sections/AboutMe.js
index ee75ef9..57fbca5 100644
--- a/src/components/sections/AboutMe.js
+++ b/src/components/sections/AboutMe.js
@@ -1,8 +1,15 @@
-import React from "react";
+import React, { useEffect } from "react";
 import Badge from "../elements/Badge";
 import Resume from "../../resume.json";
+import "lazysizes";
+import "lazysizes/plugins/attrchange/ls.attrchange";
 
 function AboutMe() {
+  useEffect(() => {
+    // initialize lazysizes library after component is mounted
+    window.lazySizes.init();
+  }, []);
+
   return (
     <section className="section has-background-link" id="aboutMe">
       <div className="container has-text-centered">
@@ -12,7 +19,8 @@ function AboutMe() {
             height="180px"
             src={Resume.basics.picture}
             alt={Resume.basics.name}
-            className="is-rounded"
+            className="is-rounded lazyload"
+            data-src={Resume.basics.picture}
             onError={(e)=>{e.target.onerror = null; e.target.src=Resume.basics.x_pictureFallback}}
           />
         </figure>
diff --git a/src/components/structure/Footer.js b/src/components/structure/Footer.js
index c7516e3..cda36ec 100644
--- a/src/components/structure/Footer.js
+++ b/src/components/structure/Footer.js
@@ -1,4 +1,6 @@
 import React from "react";
+import "lazysizes";
+import "lazysizes/plugins/attrchange/ls.attrchange";
 
 function Footer() {
   return (
@@ -15,7 +17,7 @@ function Footer() {
             width="512"
             height="96"
             src="https://bulma.io/images/made-with-bulma--semiwhite.png"
-            className="bulma-image"
+            className="bulma-image lazyload"
             alt=""
           />
         </p>