From cad1fa5c5ce42250f9fe93c06c071a8efae4a1d1 Mon Sep 17 00:00:00 2001
From: irrlicht <david@bernet.it>
Date: Sun, 7 Jun 2026 18:05:24 +0200
Subject: [PATCH] Infinite Scroll: nachladen, bis Sentinel aus dem Viewport
 wandert
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Der IntersectionObserver feuert nur bei Zustandswechseln. Füllte die erste
Feed-Seite den Viewport nicht über den Sentinel hinaus (Hauptfeed mit 198
Roots), kam es nie zu einem Übergang und damit nie zum Nachladen. loadMore
prüft jetzt nach jedem Fetch, ob der Sentinel noch sichtbar ist, und lädt
aktiv weiter; rootMargin 300px lädt zudem vorausschauend.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
---
 web/js/feed.js | 21 ++++++++++++++++++---
 1 file changed, 18 insertions(+), 3 deletions(-)

diff --git a/web/js/feed.js b/web/js/feed.js
index cf64dfd..42c8985 100644
--- a/web/js/feed.js
+++ b/web/js/feed.js
@@ -127,6 +127,16 @@ function createFeed(feedEl, sentinelEl, urlFor) {
       page++;
     }
     loading = false;
+
+    // Der IntersectionObserver feuert nur bei Zustandswechseln. Füllt die
+    // gerade geladene Seite den Viewport nicht über den Sentinel hinaus, gäbe
+    // es keinen Wechsel und nie ein Nachladen -> hier aktiv weiterladen, bis
+    // der Sentinel aus dem Sichtbereich wandert oder das Ende erreicht ist.
+    if (!done && sentinelVisible()) loadMore();
+  }
+
+  function sentinelVisible() {
+    return sentinelEl.getBoundingClientRect().top <= window.innerHeight;
   }
 
   function reset() {
@@ -136,9 +146,14 @@ function createFeed(feedEl, sentinelEl, urlFor) {
     loadMore();
   }
 
-  const observer = new IntersectionObserver((items) => {
-    if (items.some((i) => i.isIntersecting)) loadMore();
-  });
+  // rootMargin lädt schon kurz vor Erreichen des Sentinels nach (flüssiger und
+  // robust gegen den Fall eines 0-hohen Sentinels exakt am Dokumentende).
+  const observer = new IntersectionObserver(
+    (items) => {
+      if (items.some((i) => i.isIntersecting)) loadMore();
+    },
+    { rootMargin: "300px" }
+  );
   observer.observe(sentinelEl);
 
   loadMore();