implement lazy loading for images on integration page cards

layer5io · Sep 8, 2024 · 90909e5 · 90909e5
1 parent 6716f03
commit 90909e5
Showing 1 changed file with 2 additions and 2 deletions.
diff --git a/src/sections/Meshery/Meshery-integrations/Card.js b/src/sections/Meshery/Meshery-integrations/Card.js
@@ -9,7 +9,7 @@ const Card = () => {
   return (
     <IntegrationCard>
       <div className="container">
-        <img src={MissingIntegration} alt="missing integration icon" />
+        <img src={MissingIntegration} alt="missing integration icon" loading="lazy" />
         <h2>Missing an Integration?</h2>
         <p>Meshery is an extensible  platform with many purpose-built extension points. Use Meshery’s REST API or its GraphQL API both of which allow you to connect to any Kubernetes-native app.</p>
         <Button
@@ -20,7 +20,7 @@ const Card = () => {
         />
       </div>
       <div className="container">
-        <img src={ListIntegration} alt="List your integration icon" />
+        <img src={ListIntegration} alt="List your integration icon" loading="lazy" />
         <h2>Want your app listed?</h2>
         <p>Learn more about submitting an integration and partnership opportunities.</p>
         <ContactFormModal callout_text="Contact Us" form_header="Send Us An Email" />