all.dw infinite-scroll: robust pump loop (keep loading while sentinel visible) fixes 'scroll for more' stall when a load is in-flight as user reaches bottom (IntersectionObserver only fires on transition)

acfd50acf1b7201c798fa618d6f28a6e378abc1d · 2026-07-07 15:26:26 -0700 · steve@designerwallcoverings.com

Files touched

M public/index.html

Diff

commit acfd50acf1b7201c798fa618d6f28a6e378abc1d
Author: steve@designerwallcoverings.com <steve@designerwallcoverings.com>
Date:   Tue Jul 7 15:26:26 2026 -0700

    all.dw infinite-scroll: robust pump loop (keep loading while sentinel visible) fixes 'scroll for more' stall when a load is in-flight as user reaches bottom (IntersectionObserver only fires on transition)
---
 public/index.html | 16 ++++++++++++++--
 1 file changed, 14 insertions(+), 2 deletions(-)

diff --git a/public/index.html b/public/index.html
index d8882f9..14a33ba 100644
--- a/public/index.html
+++ b/public/index.html
@@ -345,7 +345,7 @@ function facetParams(extra = {}) {
   });
 }
 
-function reset() { grid.innerHTML = ''; tbody.innerHTML = ''; state.offset = 0; state.done = false; statusEl.textContent = 'loading…'; load(); }
+function reset() { grid.innerHTML = ''; tbody.innerHTML = ''; state.offset = 0; state.done = false; statusEl.textContent = 'loading…'; load().then(() => { if (sentVisible && !state.done) pump(); }); }
 function applyFilterChange() { persistFacets(); refreshFacets(); reset(); }
 function toggleSet(set, val) { set.has(val) ? set.delete(val) : set.add(val); applyFilterChange(); }
 
@@ -606,7 +606,19 @@ async function load() {
   }
 }
 
-new IntersectionObserver((es) => { if (es[0].isIntersecting) load(); }, { rootMargin: '600px' }).observe(document.getElementById('sentinel'));
+// Robust infinite scroll: a "pump" loop keeps loading WHILE the sentinel stays visible,
+// instead of relying on a single false→true intersection event. Fixes the stall where a
+// user parked at the bottom (or a load in-flight when they arrive) never re-triggers,
+// leaving "scroll for more…" stuck (IntersectionObserver only fires on transitions).
+let sentVisible = false, pumping = false;
+async function pump() {
+  if (pumping) return;
+  pumping = true;
+  try { while (sentVisible && !state.done) { const before = state.offset; await load(); if (state.offset === before) break; } }
+  finally { pumping = false; }
+}
+new IntersectionObserver((es) => { sentVisible = es[0].isIntersecting; if (sentVisible) pump(); }, { rootMargin: '600px' })
+  .observe(document.getElementById('sentinel'));
 refreshFacets(); load();
 </script>
 </body>

← 9759482 crawler: read co-located Basic-Auth-gated microsite feeds vi · back to All Designerwallcoverings · all.dw: register Pierre Frey Fabrics microsite (pierrefreyfa 050399a →