From f04f43040a8f837a2fb9118dc4602b8087c26747 Mon Sep 17 00:00:00 2001
From: Oyelola Victoria <oyelolaabimbola23@gmail.com>
Date: Sun, 8 Sep 2024 05:59:13 +0000
Subject: [PATCH] implement lazy loading for images on learn page

Signed-off-by: Oyelola Victoria <oyelolaabimbola23@gmail.com>
---
 src/sections/Learn/LearnPage-Sections/books.js     | 2 +-
 src/sections/Learn/LearnPage-Sections/learn.js     | 4 ++--
 src/sections/Learn/LearnPage-Sections/workshops.js | 4 ++--
 3 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/src/sections/Learn/LearnPage-Sections/books.js b/src/sections/Learn/LearnPage-Sections/books.js
index c95e3414a899..caffd496a063 100644
--- a/src/sections/Learn/LearnPage-Sections/books.js
+++ b/src/sections/Learn/LearnPage-Sections/books.js
@@ -136,7 +136,7 @@ const BooksSection = () => {
             <div className="books-card" key={id}>
               <Link className="books-page_link" to={fields.slug} >
                 <div className="books-image">
-                  <img src={frontmatter.thumbnail.publicURL} alt={frontmatter.title} />
+                  <img src={frontmatter.thumbnail.publicURL} alt={frontmatter.title} loading="lazy" />
                 </div>
                 <div className="books-details">
                   <h2>{frontmatter.title}</h2>
diff --git a/src/sections/Learn/LearnPage-Sections/learn.js b/src/sections/Learn/LearnPage-Sections/learn.js
index 8fe9d6268718..2b4141375302 100644
--- a/src/sections/Learn/LearnPage-Sections/learn.js
+++ b/src/sections/Learn/LearnPage-Sections/learn.js
@@ -180,7 +180,7 @@ const LearnSection = () => {
   return (
     <LearnSectionWrapper>
       <div className="learn-particle-img">
-        <img src={Meshery_Logo} alt="Meshery Logo"/>
+        <img src={Meshery_Logo} alt="Meshery Logo" loading="lazy" />
       </div>
       <div>
         <h1 className="learn-heading"><span>Meshery - </span> Learn how to manage Kubernetes</h1>
@@ -196,7 +196,7 @@ const LearnSection = () => {
                 <Button secondary title="Managing the performance of your microservices"/>
               </Link>
             </Col>
-            <img src={OReillyLogo} alt="OReilly Logo"/>
+            <img src={OReillyLogo} alt="OReilly Logo" loading="lazy" />
           </Row>
         </Container>
         <div className="learn-cards-section">
diff --git a/src/sections/Learn/LearnPage-Sections/workshops.js b/src/sections/Learn/LearnPage-Sections/workshops.js
index 976904dc233b..85f2ed4a1900 100644
--- a/src/sections/Learn/LearnPage-Sections/workshops.js
+++ b/src/sections/Learn/LearnPage-Sections/workshops.js
@@ -254,7 +254,7 @@ const WorkshopsSection = () => {
               <Col xs={12} sm={6} xl={4} className="workshops-card" key={index}>
                 <Link to={fields.slug} >
                   <div className="workshop-thumbnails">
-                    <img src={frontmatter.thumbnail.publicURL} alt={frontmatter.title} />
+                    <img src={frontmatter.thumbnail.publicURL} alt={frontmatter.title} loading="lazy" />
                   </div>
                 </Link>
               </Col>
@@ -268,7 +268,7 @@ const WorkshopsSection = () => {
             feedbackData.map((data, index) => {
               return (
                 <Col key={index} className="feedbackCol">
-                  <img className="blockquoteImg" src={BlockQouteImage} alt="Quote-Image" />
+                  <img className="blockquoteImg" src={BlockQouteImage} alt="Quote-Image" loading="lazy" />
                   <p>{data.feedback}</p>
                   <h3>{data.workshop}</h3>
                   <h5>{data.studnt_name}</h5>