feat: simplify VirtualElemt to avoid racecondition between useEffect and useLayoutEffect. When using the 'contain: 'size layout' option, a static placeholder is fine Chrome

Author: olzzon

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

@@ -1,17 +1,7 @@
-import React, { useCallback, useEffect, useLayoutEffect, useMemo, useState, useRef } from 'react'
+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
@@ -64,30 +54,25 @@ export function VirtualElement({
 }>): JSX.Element | null {
 	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 [childRef, setChildRef] = useState<HTMLElement | null>(null)
 
 	// Track the last visibility change to debounce
 	const lastVisibilityChangeRef = useRef<number>(0)
 
-	const isMeasured = !!measurements
-
 	const styleObj = useMemo<React.CSSProperties>(
 		() => ({
-			width: width ?? measurements?.width ?? 'auto',
-			height: (measurements?.clientHeight ?? placeholderHeight ?? '0') + 'px',
-			marginTop: measurements?.marginTop,
-			marginLeft: measurements?.marginLeft,
-			marginRight: measurements?.marginRight,
-			marginBottom: measurements?.marginBottom,
+			width: width ?? 'auto',
+			height: (placeholderHeight ?? '0') + 'px',
+			marginTop: 0,
+			marginLeft: 0,
+			marginRight: 0,
+			marginBottom: 0,
 			// These properties are used to ensure that if a prior element is changed from
 			// placeHolder to element, the position of visible elements are not affected.
 			contentVisibility: 'auto',
-			containIntrinsicSize: `0 ${measurements?.clientHeight ?? placeholderHeight ?? '0'}px`,
+			containIntrinsicSize: `0 ${placeholderHeight ?? '0'}px`,
 			contain: 'size layout',
 		}),
-		[width, measurements, placeholderHeight]
+		[width, placeholderHeight]
 	)
 
 	const onVisibleChanged = useCallback(
@@ -142,9 +127,6 @@ export function VirtualElement({
 			}
 			idleCallback = window.requestIdleCallback(
 				() => {
-					if (childRef) {
-						setMeasurements(measureElement(childRef))
-					}
 					setIsShowingChildren(false)
 				},
 				{
@@ -164,43 +146,9 @@ export function VirtualElement({
 				window.clearTimeout(optimizeTimeout)
 			}
 		}
-	}, [childRef, inView, measurements])
-
-	const showPlaceholder = !isShowingChildren && (!initialShow || isMeasured)
-
-	useLayoutEffect(() => {
-		if (!ref || showPlaceholder) return
-
-		const el = ref?.firstElementChild
-		if (!el || el.classList.contains('virtual-element-placeholder') || !(el instanceof HTMLElement)) return
-
-		setChildRef(el)
-
-		let idleCallback: number | undefined
-		const refreshSizingTimeout = window.setTimeout(() => {
-			idleCallback = window.requestIdleCallback(
-				() => {
-					const newMeasurements = measureElement(el)
-					setMeasurements(newMeasurements)
-
-					// Set CSS variable for expected height on parent element
-					if (ref && newMeasurements) {
-						ref.style.setProperty('--expected-height', `${newMeasurements.clientHeight}px`)
-					}
-				},
-				{
-					timeout: IDLE_CALLBACK_TIMEOUT,
-				}
-			)
-		}, 1000)
+	}, [inView])
 
-		return () => {
-			if (idleCallback) {
-				window.cancelIdleCallback(idleCallback)
-			}
-			window.clearTimeout(refreshSizingTimeout)
-		}
-	}, [ref, showPlaceholder, measurements])
+	const showPlaceholder = !isShowingChildren && !initialShow
 
 	return (
 		<InView
@@ -210,57 +158,13 @@ export function VirtualElement({
 			className={className}
 			as="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
-				}
-			>
+			<div>
 				{showPlaceholder ? (
-					<div
-						id={measurements?.id ?? id}
-						className={`virtual-element-placeholder ${placeholderClassName}`}
-						style={styleObj}
-					></div>
+					<div id={id} className={`virtual-element-placeholder ${placeholderClassName}`} style={styleObj}></div>
 				) : (
 					children
 				)}
 			</div>
 		</InView>
 	)
 }
-
-function measureElement(el: HTMLElement): IElementMeasurements | null {
-	const style = window.getComputedStyle(el)
-
-	// Get children to be measured
-	const segmentTimeline = el.querySelector('.segment-timeline')
-	const dashboardPanel = el.querySelector('.rundown-view-shelf.dashboard-panel')
-
-	if (!segmentTimeline) return null
-
-	// Segment height
-	const segmentRect = segmentTimeline.getBoundingClientRect()
-	let totalHeight = segmentRect.height
-
-	// Dashboard panel height if present
-	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,
-	}
-}