lazyload most cards

views/global/organizations.js

@@ -1,14 +1,19 @@
 window.onload = function(){
-  /* Workaround for: https://github.com/desandro/masonry/issues/1147 */
   const msnry = new Masonry('.card-rows');
-  const refresh = debounce(() => msnry.layout());
-  $('.avatar').on('load', refresh);
+
+  // lazy load cards
+  const observer = new IntersectionObserver(function(entries){
+    for (let entry of entries) {
+      if (entry.isIntersecting) {
+        var max = entry.target.id == 'scrollbottom2' ? 60 : 30;
+        console.log(`Loading ${max} more cards...`)
+        document.querySelectorAll(".organization-card.d-none").forEach(function(el, i){
+          if(i < max) el.classList.remove('d-none');
+        });
+        msnry.layout(); /* Workaround for: https://github.com/desandro/masonry/issues/1147 */
+      }
+    }
+  }, {rootMargin: "500px"});
+  document.querySelectorAll('.scrollbottom').forEach(el => observer.observe(el));
 };
 
-function debounce(func, timeout = 100){
-  let timer;
-  return (...args) => {
-    clearTimeout(timer);
-    timer = setTimeout(() => { func.apply(this, args); }, timeout);
-  };
-}

views/global/organizations.pug

@@ -3,16 +3,17 @@ extends global
 block content
   #content-container.container-fluid(style='max-width: 1600px' data-masonry='{"percentPosition":true}')
     .card-group.card-rows
-      each x in orgs
-        .col-xl-2.col-lg-3.col-md-4.col-6
+      each x, i in orgs
+        .col-xl-2.col-lg-3.col-md-4.col-6.organization-card(class=(i > 36 && 'd-none'))
           a.card.m-2.package-description-card(href=`https://${x.universe}.r-universe.dev`).text-decoration-none
             img.p-2.avatar.card-img-top(src=`${x.avatar}` loading='lazy')
             .card-body
               h5 #{x.universe}
               p.card-text #{x.bio || x.name}
             .card-footer.text-center
               small.text-body-secondary #{x.packages} packages | #{x.maintainers} maintainers
-
+      .col-12.scrollbottom#scrollbottom1(style="height:500px")
+      .col-12.scrollbottom#scrollbottom2(style="height:1000px")
 
 block after_scripts
   script