fix: virtualElement shouldn't adjust while scrolling. Earlier there was just a 5sec delay to adjust the virtualElement. Instead there's a state in viewPort telling if it's scrolling

Author: olzzon

packages/webui/src/client/lib/VirtualElement.tsx

@@ -1,5 +1,6 @@
 import React, { useCallback, useEffect, useLayoutEffect, useMemo, useState } from 'react'
 import { InView } from 'react-intersection-observer'
+import { viewPortScrollingState } from './viewPort'
 
 interface IElementMeasurements {
 	width: string | number
@@ -11,12 +12,12 @@ interface IElementMeasurements {
 	id: string | undefined
 }
 
-const OPTIMIZE_PERIOD = 5000
 const IDLE_CALLBACK_TIMEOUT = 100
 
 /**
  * This is a component that allows optimizing the amount of elements present in the DOM through replacing them
  * with placeholders when they aren't visible in the viewport.
+ * Scroll timing issues, should be handled in viewPort.tsx where the scrolling state is tracked.
  *
  * @export
  * @param {(React.PropsWithChildren<{
@@ -83,14 +84,40 @@ export function VirtualElement({
 		setInView(visible)
 	}, [])
 
+	const isScrolling = (): boolean => {
+		// Don't do updates while scrolling:
+		if (viewPortScrollingState.isProgrammaticScrollInProgress) {
+			return true
+		}
+		// And wait if a programmatic scroll was done recently:
+		const timeSinceLastProgrammaticScroll = Date.now() - viewPortScrollingState.lastProgrammaticScrollTime
+		if (timeSinceLastProgrammaticScroll < 100) {
+			return true
+		}
+		return false
+	}
+
 	useEffect(() => {
 		if (inView === true) {
 			setIsShowingChildren(true)
 			return
 		}
 
 		let idleCallback: number | undefined
-		const optimizeTimeout = window.setTimeout(() => {
+		let optimizeTimeout: number | undefined
+
+		const scheduleOptimization = () => {
+			if (optimizeTimeout) {
+				window.clearTimeout(optimizeTimeout)
+			}
+			// Don't proceed if we're scrolling
+			if (isScrolling()) {
+				// Reschedule for after the scroll should be complete
+				const scrollDelay = 200
+				window.clearTimeout(optimizeTimeout)
+				optimizeTimeout = window.setTimeout(scheduleOptimization, scrollDelay)
+				return
+			}
 			idleCallback = window.requestIdleCallback(
 				() => {
 					if (childRef) {
@@ -102,14 +129,18 @@ export function VirtualElement({
 					timeout: IDLE_CALLBACK_TIMEOUT,
 				}
 			)
-		}, OPTIMIZE_PERIOD)
+		}
+
+		// Schedule the optimization:
+		scheduleOptimization()
 
 		return () => {
 			if (idleCallback) {
 				window.cancelIdleCallback(idleCallback)
 			}
-
-			window.clearTimeout(optimizeTimeout)
+			if (optimizeTimeout) {
+				window.clearTimeout(optimizeTimeout)
+			}
 		}
 	}, [childRef, inView])
 

packages/webui/src/client/lib/viewPort.ts

@@ -267,6 +267,11 @@ function getRegionPosition(topElement: HTMLElement, bottomElement: HTMLElement):
 	return { top, bottom }
 }
 
+export const viewPortScrollingState = {
+	isProgrammaticScrollInProgress: false,
+	lastProgrammaticScrollTime: 0,
+}
+
 export async function scrollToPosition(scrollPosition: number, noAnimation?: boolean): Promise<void> {
 	// Calculate the exact position
 	const headerOffset = getHeaderHeight() + HEADER_MARGIN
@@ -280,11 +285,16 @@ export async function scrollToPosition(scrollPosition: number, noAnimation?: boo
 		})
 		return Promise.resolve()
 	} else {
+		viewPortScrollingState.isProgrammaticScrollInProgress = true
+		viewPortScrollingState.lastProgrammaticScrollTime = Date.now()
+
 		window.scroll({
 			top: targetTop,
 			left: 0,
 			behavior: 'smooth',
 		})
+		await new Promise((resolve) => setTimeout(resolve, 500))
+		viewPortScrollingState.isProgrammaticScrollInProgress = false
 	}
 }