Lazy load community images

Author: mediremi

src/components/ImageGallery.res

@@ -3,7 +3,13 @@ type mode =
   | AutoFadeTransition(int) //milliseconds
 
 @react.component
-let make = (~className="", ~imgClassName="", ~imgSrcs: array<string>, ~mode=NoAuto) => {
+let make = (
+  ~className="",
+  ~imgClassName="",
+  ~imgSrcs: array<string>,
+  ~imgLoading=?,
+  ~mode=NoAuto,
+) => {
   let (index, setIndex) = React.useState(_ => 0)
 
   React.useEffect(() => {
@@ -72,7 +78,7 @@ let make = (~className="", ~imgClassName="", ~imgSrcs: array<string>, ~mode=NoAu
         leave="transition-opacity duration-1000"
         leaveFrom="opacity-100"
         leaveTo="opacity-0">
-        <img className=imgClassName src />
+        <img className=imgClassName src loading=?imgLoading />
       </HeadlessUI.Transition>
     </div>
     <div className="flex space-x-2 mt-4"> {lineEls->React.array} </div>

src/layouts/LandingPageLayout.res

@@ -445,6 +445,7 @@ module OtherSellingPoints = {
               "/static/lp/community-2.jpg",
               "/static/lp/community-1.jpg",
             ]}
+            imgLoading=#lazy
           />
           <h3 className="hl-3 text-gray-20 mt-4 mb-2">
             {React.string(`A community of programmers who value getting things done`)}