lazy load images below the fold for community content and blog page

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>

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>
   }