Merge branch 'fix-memory-leaks' into bbc-main-autonext

Author: PeterC89

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

@@ -234,16 +234,11 @@ export function VirtualElement({
 	)
 
 	const isScrolling = (): boolean => {
-		// Don't do updates while scrolling:
-		if (getViewPortScrollingState().isProgrammaticScrollInProgress) {
-			return true
-		}
-		// And wait if a programmatic scroll was done recently:
-		const timeSinceLastProgrammaticScroll = Date.now() - getViewPortScrollingState().lastProgrammaticScrollTime
-		if (timeSinceLastProgrammaticScroll < 100) {
-			return true
-		}
-		return false
+		const { isProgrammaticScrollInProgress, lastProgrammaticScrollTime } = getViewPortScrollingState()
+		if (!isProgrammaticScrollInProgress) return false
+
+		// Safety valve: stale programmatic scroll state should not block virtualization indefinitely.
+		return Date.now() - lastProgrammaticScrollTime < 1200
 	}
 
 	useEffect(() => {
@@ -423,7 +418,7 @@ export class ElementObserverManager {
 	private resizeObserver: ResizeObserver
 	private mutationObserver: MutationObserver
 	private observedElements: Map<HTMLElement, () => void>
-	private pendingReconnectFrame: number | undefined
+	private isMutationObserverActive = false
 
 	private pruneDetachedObservedElements(): void {
 		for (const observedElement of Array.from(this.observedElements.keys())) {
@@ -448,34 +443,59 @@ export class ElementObserverManager {
 			})
 		})
 
-		// Configure MutationObserver
+		// Configure MutationObserver once and only connect/disconnect based on active observed elements.
 		this.mutationObserver = new MutationObserver((mutations) => {
+			if (this.observedElements.size === 0) return
+
 			this.pruneDetachedObservedElements()
 			const targets = new Set<HTMLElement>()
 
 			mutations.forEach((mutation) => {
-				const target = mutation.target as HTMLElement
-				if (!document.contains(target)) return
-				// Find the closest observed element
-				let element = target
+				let element: HTMLElement | null = null
+				if (mutation.target instanceof HTMLElement) {
+					element = mutation.target
+				} else {
+					element = mutation.target.parentElement
+				}
+
+				if (!element || !document.contains(element)) return
+
 				while (element) {
 					if (this.observedElements.has(element)) {
 						targets.add(element)
 						break
 					}
-					if (!element.parentElement) break
 					element = element.parentElement
 				}
 			})
 
-			// Call callbacks for affected elements
 			targets.forEach((element) => {
 				const callback = this.observedElements.get(element)
 				if (callback) callback()
 			})
 		})
 	}
 
+	private ensureMutationObserverConnected(): void {
+		if (this.isMutationObserverActive) return
+		if (this.observedElements.size === 0) return
+		if (!document.body) return
+
+		this.mutationObserver.observe(document.body, {
+			childList: true,
+			subtree: true,
+			attributes: true,
+			characterData: true,
+		})
+		this.isMutationObserverActive = true
+	}
+
+	private disconnectMutationObserver(): void {
+		if (!this.isMutationObserverActive) return
+		this.mutationObserver.disconnect()
+		this.isMutationObserverActive = false
+	}
+
 	public static getInstance(): ElementObserverManager {
 		if (!ElementObserverManager.instance) {
 			ElementObserverManager.instance = new ElementObserverManager()
@@ -490,55 +510,18 @@ export class ElementObserverManager {
 
 		this.observedElements.set(element, callback)
 		this.resizeObserver.observe(element)
-		if (!this.pendingReconnectFrame) {
-			this.mutationObserver.observe(element, {
-				childList: true,
-				subtree: true,
-				attributes: true,
-				characterData: true,
-			})
-		}
+		this.ensureMutationObserverConnected()
 	}
 
 	public unobserve(element: HTMLElement): void {
 		if (!element) return
 		this.observedElements.delete(element)
 		this.resizeObserver.unobserve(element)
 		this.pruneDetachedObservedElements()
-		this.mutationObserver.disconnect()
 
 		if (this.observedElements.size === 0) {
-			if (this.pendingReconnectFrame) {
-				window.cancelAnimationFrame(this.pendingReconnectFrame)
-				this.pendingReconnectFrame = undefined
-			}
-			this.mutationObserver.disconnect()
 			this.resizeObserver.disconnect()
-			return
-		}
-
-		if (!this.pendingReconnectFrame) {
-			this.pendingReconnectFrame = window.requestAnimationFrame(() => {
-				this.pendingReconnectFrame = undefined
-
-				// MutationObserver has no per-element unobserve, so we reconnect once per frame.
-				this.pruneDetachedObservedElements()
-
-				if (this.observedElements.size === 0) {
-					this.resizeObserver.disconnect()
-					return
-				}
-
-				this.observedElements.forEach((_, el) => {
-					if (!document.contains(el)) return
-					this.mutationObserver.observe(el, {
-						childList: true,
-						subtree: true,
-						attributes: true,
-						characterData: true,
-					})
-				})
-			})
+			this.disconnectMutationObserver()
 		}
 	}
 }

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

@@ -337,8 +337,30 @@ export async function scrollToPosition(scrollPosition: number, noAnimation?: boo
 			left: 0,
 			behavior: 'smooth',
 		})
-		await new Promise((resolve) => setTimeout(resolve, 300))
+
+		await new Promise<void>((resolve) => {
+			const startTime = Date.now()
+			let previousY = window.scrollY
+			let stableTicks = 0
+			const interval = window.setInterval(() => {
+				const currentY = window.scrollY
+				if (Math.abs(currentY - previousY) <= 1) {
+					stableTicks++
+				} else {
+					stableTicks = 0
+				}
+				previousY = currentY
+				viewPortScrollingState.lastProgrammaticScrollTime = Date.now()
+
+				if (stableTicks >= 2 || Date.now() - startTime > 1200) {
+					window.clearInterval(interval)
+					resolve()
+				}
+			}, 50)
+		})
+
 		viewPortScrollingState.isProgrammaticScrollInProgress = false
+		viewPortScrollingState.lastProgrammaticScrollTime = Date.now()
 	}
 }