From 48dd90513ed5fd56776cd8215540740b0f481bed Mon Sep 17 00:00:00 2001
From: neverland <chenjiahan.jait@bytedance.com>
Date: Tue, 27 Aug 2024 17:30:45 +0800
Subject: [PATCH] docs(homepage): lazy load images

---
 .../theme/components/Landingpage/BuiltWithRspack/index.tsx | 2 +-
 .../theme/components/Landingpage/FullyFeatured/index.tsx   | 1 +
 website/theme/components/Landingpage/ToolStack/index.tsx   | 7 ++++++-
 3 files changed, 8 insertions(+), 2 deletions(-)

diff --git a/website/theme/components/Landingpage/BuiltWithRspack/index.tsx b/website/theme/components/Landingpage/BuiltWithRspack/index.tsx
index a34c08591a9..91f4cb5220f 100644
--- a/website/theme/components/Landingpage/BuiltWithRspack/index.tsx
+++ b/website/theme/components/Landingpage/BuiltWithRspack/index.tsx
@@ -62,7 +62,7 @@ const CompanyItem = ({ item }: { item: Company }) => {
   const { logo, name, url, text, width } = item;
   return (
     <Link className={styles.logo} href={url}>
-      <img src={logo} alt={name} style={{ width }} />
+      <img src={logo} alt={name} style={{ width }} loading="lazy" />
       {text !== undefined ? (
         <span className={styles.logoText}>{text}</span>
       ) : (
diff --git a/website/theme/components/Landingpage/FullyFeatured/index.tsx b/website/theme/components/Landingpage/FullyFeatured/index.tsx
index 8d6c8b5df11..6bd2a82b234 100644
--- a/website/theme/components/Landingpage/FullyFeatured/index.tsx
+++ b/website/theme/components/Landingpage/FullyFeatured/index.tsx
@@ -125,6 +125,7 @@ const FullyFeatured = memo(() => {
                       src={icon}
                       alt={index.toString()}
                       className={styles.icon}
+                      loading="lazy"
                     />
                     <div className={styles.featureContent}>
                       <h2 className={styles.featureTitle}>{title}</h2>
diff --git a/website/theme/components/Landingpage/ToolStack/index.tsx b/website/theme/components/Landingpage/ToolStack/index.tsx
index 84b9ae4fad4..26936d6b678 100644
--- a/website/theme/components/Landingpage/ToolStack/index.tsx
+++ b/website/theme/components/Landingpage/ToolStack/index.tsx
@@ -65,7 +65,12 @@ const ToolStack: React.FC = memo(() => {
           {tools.map(({ name, desc, logo, url }) => {
             return (
               <Link className={styles.tool} key={name} href={url}>
-                <img src={logo} alt={name} className={styles.logo} />
+                <img
+                  src={logo}
+                  alt={name}
+                  className={styles.logo}
+                  loading="lazy"
+                />
                 <h3 className={styles.toolTitle}>{name}</h3>
                 <p className={styles.toolDescription}>{desc}</p>
               </Link>