Cutlery/immich
1
0
Fork 1
mirror of https://github.com/immich-app/immich.git synced 2025-10-26 08:12:33 -04:00
Code Issues Packages Projects Releases Wiki Activity

Move updateSlidingWindow into onScroll

Browse Source
This commit is contained in:
midzelis 2025-08-24 15:09:14 +00:00
parent abd97c4a93
commit 50d9b1ec60
1 changed files with 7 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

15
web/src/lib/components/timeline/base-components/base-timeline-viewer.svelte
View File

@ -85,12 +85,14 @@
if (element) { if (element) {
element.scrollTo({ top }); element.scrollTo({ top });
} }
updateSlidingWindow();
}; };
const scrollBy = (y: number) => { const scrollBy = (y: number) => {
if (element) { if (element) {
element.scrollBy(0, y); element.scrollBy(0, y);
} }
updateSlidingWindow();
}; };
const getAssetHeight = (assetId: string, monthGroup: MonthGroup) => { const getAssetHeight = (assetId: string, monthGroup: MonthGroup) => {
@ -127,7 +129,6 @@
} }
scrollTo(height); scrollTo(height);
updateSlidingWindow();
return true; return true;
}; };
@ -138,7 +139,6 @@
} }
const height = getAssetHeight(asset.id, monthGroup); const height = getAssetHeight(asset.id, monthGroup);
scrollTo(height); scrollTo(height);
updateSlidingWindow();
return true; return true;
}; };
@ -163,7 +163,11 @@
}); });
const updateIsScrolling = () => (timelineManager.scrolling = true); const updateIsScrolling = () => (timelineManager.scrolling = true);
// note: don't throttle, debounce, or otherwise do this function async - it causes flicker // Yes, updateSlideWindow() is called by the onScroll event. However, if you also just scrolled
// by explicitly invoking element.scrollX functions, there may be a delay with enough time to
// set the intersecting property of the monthGroup to false, then true, which causes the DOM
// nodes to be recreated, causing bad perf, and also, disrupting focus of those elements.
// Also note: don't throttle, debounce, or otherwise do this function async - it causes flicker
const updateSlidingWindow = () => timelineManager.updateSlidingWindow(element?.scrollTop || 0); const updateSlidingWindow = () => timelineManager.updateSlidingWindow(element?.scrollTop || 0);
const scrollCompensation = ({ heightDelta, scrollTop }: { heightDelta?: number; scrollTop?: number }) => { const scrollCompensation = ({ heightDelta, scrollTop }: { heightDelta?: number; scrollTop?: number }) => {
@ -172,11 +176,6 @@
} else if (scrollTop !== undefined) { } else if (scrollTop !== undefined) {
scrollTo(scrollTop); scrollTo(scrollTop);
} }
// Yes, updateSlideWindow() is called by the onScroll event triggered as a result of
// the above calls. However, this delay is enough time to set the intersecting property
// of the monthGroup to false, then true, which causes the DOM nodes to be recreated,
// causing bad perf, and also, disrupting focus of those elements.
updateSlidingWindow();
}; };
const onScrollCompensation = scrollCompensation; const onScrollCompensation = scrollCompensation;