debounce thumbnails rendering

src/App.jsx

@@ -634,7 +634,7 @@ const App = memo(() => {
     setThumbnails(v => [...v, thumbnail]);
   }
 
-  useEffect(() => {
+  const [, cancelRenderThumbnails] = useDebounce(() => {
     async function renderThumbnails() {
       if (!thumbnailsEnabled || thumnailsRenderingPromiseRef.current) return;
 
@@ -651,7 +651,7 @@ const App = memo(() => {
     }
 
     if (duration) renderThumbnails();
-  }, [zoomedDuration, duration, filePath, zoomWindowStartTime, thumbnailsEnabled]);
+  }, 500, [zoomedDuration, duration, filePath, zoomWindowStartTime, thumbnailsEnabled]);
 
   // Cleanup removed thumbnails
   useEffect(() => {
@@ -750,7 +750,8 @@ const App = memo(() => {
     cancelReadKeyframeDataDebounce();
 
     setThumbnails([]);
-  }, [cutSegmentsHistory, cancelCutSegmentsDebounce, setCutSegments, cancelWaveformDataDebounce, cancelReadKeyframeDataDebounce]);
+    cancelRenderThumbnails();
+  }, [cutSegmentsHistory, cancelCutSegmentsDebounce, setCutSegments, cancelWaveformDataDebounce, cancelReadKeyframeDataDebounce, cancelRenderThumbnails]);
 
 
   // Cleanup old

src/Timeline.jsx

@@ -67,9 +67,11 @@ const Timeline = memo(({
     return undefined;
   }, [calculateTimelinePos, playerTime, zoom]);
 
-  const zoomWindowStartTime = timelineScrollerRef.current
+  const calcZoomWindowStartTime = useCallback(() => (timelineScrollerRef.current
     ? (timelineScrollerRef.current.scrollLeft / (timelineScrollerRef.current.offsetWidth * zoom)) * duration
-    : 0;
+    : 0), [duration, zoom]);
+
+  // const zoomWindowStartTime = calcZoomWindowStartTime(duration, zoom);
 
   useEffect(() => {
     timelineScrollerSkipEventDebounce.current = debounce(() => {
@@ -93,7 +95,7 @@ const Timeline = memo(({
       suppressScrollerEvents();
       timelineScrollerRef.current.scrollLeft -= timelineScrollerRef.current.offsetWidth * 0.9;
     }
-  }, [currentTimePosPixels, zoomWindowStartTime]);
+  }, [currentTimePosPixels]);
 
   const currentTimeWidth = 1;
 
@@ -121,8 +123,8 @@ const Timeline = memo(({
   }, []);
 
   const onTimelineScroll = useCallback(() => {
-    onZoomWindowStartTimeChange(zoomWindowStartTime);
-  }, [zoomWindowStartTime, onZoomWindowStartTimeChange]);
+    onZoomWindowStartTimeChange(calcZoomWindowStartTime());
+  }, [calcZoomWindowStartTime, onZoomWindowStartTimeChange]);
 
   // Keep cursor in middle while scrolling
   /* const onTimelineScroll = useCallback((e) => {