From aea84382fbc31c20bd9c38a2060efab426268071 Mon Sep 17 00:00:00 2001
From: Hichem Fantar <fantar.hichem@gmail.com>
Date: Sun, 5 Jan 2025 00:52:24 +0100
Subject: [PATCH] feat: Add lazy loading to images for performance improvements

---
 website/src/pages/Home/Community/index.tsx             | 4 ++--
 website/src/pages/Home/components/ThemeImage/index.tsx | 1 +
 website/src/pages/showcase.tsx                         | 9 +++++++--
 website/src/theme/Blog/Components/Author/index.tsx     | 1 +
 4 files changed, 11 insertions(+), 4 deletions(-)

diff --git a/website/src/pages/Home/Community/index.tsx b/website/src/pages/Home/Community/index.tsx
index fe4987f1703..5ed562767c3 100644
--- a/website/src/pages/Home/Community/index.tsx
+++ b/website/src/pages/Home/Community/index.tsx
@@ -81,10 +81,10 @@ function Community() {
                 <li key={i} className="item">
                   {app.infoLink ? (
                     <a href={app.infoLink}>
-                      <img src={imgSource} alt={app.name} />
+                      <img src={imgSource} alt={app.name} loading="lazy" />
                     </a>
                   ) : (
-                    <img src={imgSource} alt={app.name} />
+                    <img src={imgSource} alt={app.name} loading="lazy" />
                   )}
                 </li>
               );
diff --git a/website/src/pages/Home/components/ThemeImage/index.tsx b/website/src/pages/Home/components/ThemeImage/index.tsx
index 1b50f92d5af..b64c5203a1f 100644
--- a/website/src/pages/Home/components/ThemeImage/index.tsx
+++ b/website/src/pages/Home/components/ThemeImage/index.tsx
@@ -36,6 +36,7 @@ function ThemeImage({lightSrc, darkSrc, className, alt}) {
       src={theme === 'dark' ? darkSrc : lightSrc}
       alt={alt}
       className={className}
+      loading="lazy"
     />
   );
 }
diff --git a/website/src/pages/showcase.tsx b/website/src/pages/showcase.tsx
index c7c102b5b25..8950fe0d8e9 100644
--- a/website/src/pages/showcase.tsx
+++ b/website/src/pages/showcase.tsx
@@ -32,8 +32,13 @@ const AppBox = ({app}) => {
   return (
     <div className="showcase">
       <div className="iconBox">
-        <img src={imgSource} alt={app.name} className="iconBackground" />
-        <img src={imgSource} alt={app.name} className="icon" />
+        <img
+          src={imgSource}
+          alt={app.name}
+          className="iconBackground"
+          loading="lazy"
+        />
+        <img src={imgSource} alt={app.name} className="icon" loading="lazy" />
       </div>
       <div className="showcaseContent">
         <div>
diff --git a/website/src/theme/Blog/Components/Author/index.tsx b/website/src/theme/Blog/Components/Author/index.tsx
index 8c550c24da2..47cac8b7383 100644
--- a/website/src/theme/Blog/Components/Author/index.tsx
+++ b/website/src/theme/Blog/Components/Author/index.tsx
@@ -53,6 +53,7 @@ export default function BlogAuthor({as, author, className, count}) {
             className={clsx('avatar__photo', styles.authorImage)}
             src={imageURL}
             alt={name}
+            loading="lazy"
           />
         </MaybeLink>
       )}