From 231c80039561ca5e2c4305e2e44741f63f959105 Mon Sep 17 00:00:00 2001
From: Josh Vlk <josh@vlkpack.com>
Date: Thu, 13 Mar 2025 15:19:46 -0400
Subject: [PATCH] lazy load images below the fold for community content and
 blog page

---
 src/Blog.res             |  6 +++---
 src/CommunityContent.res | 10 +++++++---
 2 files changed, 10 insertions(+), 6 deletions(-)

diff --git a/src/Blog.res b/src/Blog.res
index 91b2e8844..47d4e8c61 100644
--- a/src/Blog.res
+++ b/src/Blog.res
@@ -95,8 +95,8 @@ module BlogCard = {
           {
             let className = "absolute top-0 h-full w-full object-cover"
             switch previewImg {
-            | Some(src) => <img className src />
-            | None => <img className src=defaultPreviewImg />
+            | Some(src) => <img className src loading={#"lazy"} />
+            | None => <img className src=defaultPreviewImg loading={#"lazy"} />
             }
           }
         </Link>
@@ -155,7 +155,7 @@ module FeatureCard = {
             let className = "absolute top-0 h-full w-full object-cover"
             switch previewImg {
             | Some(src) => <img className src />
-            | None => <img className src=defaultPreviewImg />
+            | None => <img className src=defaultPreviewImg loading={#eager} />
             }
           }
         </Link>
diff --git a/src/CommunityContent.res b/src/CommunityContent.res
index 0f9ff49ac..846ae9905 100644
--- a/src/CommunityContent.res
+++ b/src/CommunityContent.res
@@ -17,10 +17,14 @@ let simplifyUrl = url =>
 
 module LinkCard = {
   @react.component
-  let make = (~link) => {
+  let make = (~link, ~index) => {
+    let loading = switch index {
+    | 0 => #eager
+    | _ => #"lazy"
+    }
     <div className="rounded-lg  hover:text-fire overflow-hidden bg-gray-10 border-2 border-gray-30">
       <a href=link.url className="flex flex-col h-full">
-        <img className="object-cover w-full lg:h-40 max-h-[345px]" src=link.image alt="" />
+        <img className="object-cover w-full lg:h-40 max-h-[345px]" src=link.image alt="" loading />
         <div className="p-3 md:p-5 grow">
           <h3 className="font-semibold text-16 grow-0 mb-2"> {React.string(link.title)} </h3>
           <p className="mb-2 text-14 grow text-gray-80"> {React.string(link.description)} </p>
@@ -44,7 +48,7 @@ module LinkCards = {
         | _ => link
         }
       )
-      ->Array.map(link => <LinkCard link key=link.title />)
+      ->Array.mapWithIndex((link, index) => <LinkCard link key=link.title index />)
       ->React.array}
     </div>
   }