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>
This commit is contained in:
Thomas 2025-08-19 15:09:39 +01:00 committed by GitHub
parent f08002d48f
commit 47566c1a4a
No known key found for this signature in database
GPG key ID: B5690EEEBB952194

View file

@ -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;