mirror of
https://github.com/immich-app/immich
synced 2025-11-07 17:27:20 +00:00
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:
parent
f08002d48f
commit
47566c1a4a
1 changed files with 3 additions and 7 deletions
|
|
@ -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;
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue