From 50d9b1ec60e3885bf2bf1a06a81241022fd42f66 Mon Sep 17 00:00:00 2001
From: midzelis <min123@gmail.com>
Date: Sun, 24 Aug 2025 15:09:14 +0000
Subject: [PATCH] Move updateSlidingWindow into onScroll

---
 .../base-components/base-timeline-viewer.svelte   | 15 +++++++--------
 1 file changed, 7 insertions(+), 8 deletions(-)

diff --git a/web/src/lib/components/timeline/base-components/base-timeline-viewer.svelte b/web/src/lib/components/timeline/base-components/base-timeline-viewer.svelte
index b3a4e80434..980fc8d9c4 100644
--- a/web/src/lib/components/timeline/base-components/base-timeline-viewer.svelte
+++ b/web/src/lib/components/timeline/base-components/base-timeline-viewer.svelte
@@ -85,12 +85,14 @@
     if (element) {
       element.scrollTo({ top });
     }
+    updateSlidingWindow();
   };
 
   const scrollBy = (y: number) => {
     if (element) {
       element.scrollBy(0, y);
     }
+    updateSlidingWindow();
   };
 
   const getAssetHeight = (assetId: string, monthGroup: MonthGroup) => {
@@ -127,7 +129,6 @@
     }
 
     scrollTo(height);
-    updateSlidingWindow();
     return true;
   };
 
@@ -138,7 +139,6 @@
     }
     const height = getAssetHeight(asset.id, monthGroup);
     scrollTo(height);
-    updateSlidingWindow();
     return true;
   };
 
@@ -163,7 +163,11 @@
   });
 
   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 scrollCompensation = ({ heightDelta, scrollTop }: { heightDelta?: number; scrollTop?: number }) => {
@@ -172,11 +176,6 @@
     } else if (scrollTop !== undefined) {
       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;