fix: add precalculated measurement

Author: olzzon

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

@@ -2,6 +2,16 @@ import React, { useCallback, useEffect, useMemo, useState, useRef } from 'react'
 import { InView } from 'react-intersection-observer'
 import { getViewPortScrollingState } from './viewPort'
 
+interface IElementMeasurements {
+	width: string | number
+	clientHeight: number
+	marginLeft: string | number | undefined
+	marginRight: string | number | undefined
+	marginTop: string | number | undefined
+	marginBottom: string | number | undefined
+	id: string | undefined
+}
+
 const IDLE_CALLBACK_TIMEOUT = 100
 // Increased delay for Safari, as Safari doesn't have scroll time when using 'smooth' scroll
 const SAFARI_VISIBILITY_DELAY = /^((?!chrome|android).)*safari/i.test(navigator.userAgent) ? 100 : 0
@@ -52,9 +62,15 @@ export function VirtualElement({
 	id?: string | undefined
 	className?: string
 }>): JSX.Element | null {
+	const [waitForInitialLoad, setWaitForInitialLoad] = useState(true)
 	const [inView, setInView] = useState(initialShow ?? false)
 	const [isShowingChildren, setIsShowingChildren] = useState(inView)
 
+	const [measurements, setMeasurements] = useState<IElementMeasurements | null>(null)
+	const [ref, setRef] = useState<HTMLDivElement | null>(null)
+
+	const showPlaceholder = !isShowingChildren && !initialShow
+
 	// Track the last visibility change to debounce
 	const lastVisibilityChangeRef = useRef<number>(0)
 
@@ -107,6 +123,21 @@ export function VirtualElement({
 	useEffect(() => {
 		if (inView === true) {
 			setIsShowingChildren(true)
+
+			// Schedule a measurement after a short delay
+			if (waitForInitialLoad && ref) {
+				const initialMeasurementTimeout = window.setTimeout(() => {
+					const measurements = measureElement(ref)
+					if (measurements) {
+						setMeasurements(measurements)
+						setWaitForInitialLoad(false)
+					}
+				}, 1000)
+
+				return () => {
+					window.clearTimeout(initialMeasurementTimeout)
+				}
+			}
 			return
 		}
 
@@ -127,6 +158,13 @@ export function VirtualElement({
 			}
 			idleCallback = window.requestIdleCallback(
 				() => {
+					// Measure the entire wrapper element instead of just the childRef
+					if (ref) {
+						const measurements = measureElement(ref)
+						if (measurements) {
+							setMeasurements(measurements)
+						}
+					}
 					setIsShowingChildren(false)
 				},
 				{
@@ -146,9 +184,7 @@ export function VirtualElement({
 				window.clearTimeout(optimizeTimeout)
 			}
 		}
-	}, [inView])
-
-	const showPlaceholder = !isShowingChildren && !initialShow
+	}, [ref, inView])
 
 	return (
 		<InView
@@ -158,13 +194,96 @@ export function VirtualElement({
 			className={className}
 			as="div"
 		>
-			<div>
+			<div
+				ref={setRef}
+				style={
+					// We need to set undefined if the height is not known, to allow the parent to calculate the height
+					measurements
+						? {
+								height: measurements.clientHeight + 'px',
+						  }
+						: undefined
+				}
+			>
 				{showPlaceholder ? (
-					<div id={id} className={`virtual-element-placeholder ${placeholderClassName}`} style={styleObj}></div>
+					<div
+						id={measurements?.id ?? id}
+						className={`virtual-element-placeholder ${placeholderClassName}`}
+						style={styleObj}
+					></div>
 				) : (
 					children
 				)}
 			</div>
 		</InView>
 	)
 }
+
+function measureElement(wrapperEl: HTMLDivElement): IElementMeasurements | null {
+	if (!wrapperEl || !wrapperEl.firstElementChild) {
+		return null
+	}
+
+	const el = wrapperEl.firstElementChild as HTMLElement
+	const style = window.getComputedStyle(el)
+
+	// Look for the complete wrapper that contains both the timeline and dashboard
+	const timelineWrapper = el.closest('.segment-timeline-wrapper--shelf')
+
+	if (timelineWrapper) {
+		// Check if the direct child of the wrapper has an explicit height set
+		const wrapperChild = timelineWrapper.querySelector(':scope > div')
+		let totalHeight = 0
+
+		if (wrapperChild && wrapperChild instanceof HTMLElement) {
+			// Check for explicit height style
+			const inlineHeight = wrapperChild.style.height
+			if (inlineHeight && inlineHeight.length > 0) {
+				// Use the explicit height if it exists
+				// Extract the numeric value if it's in pixels
+				const heightValue = parseInt(inlineHeight, 10)
+				if (!isNaN(heightValue)) {
+					totalHeight = heightValue
+				}
+			}
+		}
+
+		// If no explicit height was found or it wasn't parseable, fall back to measuring
+		if (totalHeight === 0) {
+			// Get the segment timeline height
+			const segmentTimeline = timelineWrapper.querySelector('.segment-timeline')
+			if (segmentTimeline) {
+				const segmentRect = segmentTimeline.getBoundingClientRect()
+				totalHeight = segmentRect.height
+			}
+
+			// Add the dashboard panel height if it exists
+			const dashboardPanel = timelineWrapper.querySelector('.dashboard-panel')
+			if (dashboardPanel) {
+				const panelRect = dashboardPanel.getBoundingClientRect()
+				totalHeight += panelRect.height
+			}
+		}
+
+		return {
+			width: style.width || 'auto',
+			clientHeight: totalHeight,
+			marginTop: style.marginTop || undefined,
+			marginBottom: style.marginBottom || undefined,
+			marginLeft: style.marginLeft || undefined,
+			marginRight: style.marginRight || undefined,
+			id: el.id,
+		}
+	}
+
+	// Fallback to just measuring the element itself if wrapper isn't found
+	return {
+		width: style.width || 'auto',
+		clientHeight: el.clientHeight,
+		marginTop: style.marginTop || undefined,
+		marginBottom: style.marginBottom || undefined,
+		marginLeft: style.marginLeft || undefined,
+		marginRight: style.marginRight || undefined,
+		id: el.id,
+	}
+}