diff --git a/views/global/organizations.js b/views/global/organizations.js index 3d98bd2..278ece0 100644 --- a/views/global/organizations.js +++ b/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); - }; -} diff --git a/views/global/organizations.pug b/views/global/organizations.pug index 934ff43..db7ed2d 100644 --- a/views/global/organizations.pug +++ b/views/global/organizations.pug @@ -3,8 +3,8 @@ 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 @@ -12,7 +12,8 @@ block content 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