From 47566c1a4a19bdb1703b90952009b1aa9e13bc4e Mon Sep 17 00:00:00 2001
From: Thomas <9749173+uhthomas@users.noreply.github.com>
Date: Tue, 19 Aug 2025 15:09:39 +0100
Subject: [PATCH] chore(web): make search result loading behaviour more
 consistent (#20741)

The current behaviour will intersect if the page is scrolled about 90% down
which works okay for a small number of assets, but does not scale well with
large amounts of assets. Instead of relying in proportional values, it may be
more sensible to use a consistent measure for loading more pages. A simple and
sensible suggestion may be to load another page when there is only one more
viewport worth of assets to display. It can be refined and revisited in future,
but it seems to work relatively well in my testing and prevents the issues
which occur with large amounts of assets.

Co-authored-by: Alex <alex.tran1502@gmail.com>
---
 .../gallery-viewer/gallery-viewer.svelte               | 10 +++-------
 1 file changed, 3 insertions(+), 7 deletions(-)

diff --git a/web/src/lib/components/shared-components/gallery-viewer/gallery-viewer.svelte b/web/src/lib/components/shared-components/gallery-viewer/gallery-viewer.svelte
index fad053fc67..d369068a2c 100644
--- a/web/src/lib/components/shared-components/gallery-viewer/gallery-viewer.svelte
+++ b/web/src/lib/components/shared-components/gallery-viewer/gallery-viewer.svelte
@@ -145,14 +145,10 @@
 
   let lastIntersectedHeight = 0;
   $effect(() => {
-    const scrollRatio = slidingWindow.bottom / assetLayouts.containerHeight;
-
-    // TODO: We may want to limit to an absolute value as the ratio scaling will
-    // get weird with lots of assets. The page may be nowhere near the bottom in
-    // absolute terms, and yet the intersection will still be triggered.
-    if (scrollRatio > 0.9) {
+    // Intersect if there's only one viewport worth of assets left to scroll.
+    if (assetLayouts.containerHeight - slidingWindow.bottom <= viewport.height) {
       // Notify we got to (near) the end of scroll.
-      const intersectedHeight = geometry?.containerHeight || 0;
+      const intersectedHeight = assetLayouts.containerHeight;
       if (lastIntersectedHeight !== intersectedHeight) {
         debouncedOnIntersected();
         lastIntersectedHeight = intersectedHeight;