@octane-xplat/ui 0.7.2 → 0.9.0

package/src/VirtualList.tsrx

@@ -1,5 +1,5 @@
 /** @jsxImportSource @nativescript-community/octane */
-import { useMemo, useRef, useState } from 'octane'
+import { useEffect, useMemo, useRef, useState } from 'octane'
 import type { VirtualListProps } from './props'
 import {
 	createVirtualListEntries,
@@ -7,9 +7,14 @@ import {
 	virtualListMeasurementKey,
 	virtualListRange,
 	VirtualListSizeIndex,
+	VIRTUAL_LIST_ESTIMATED_ROW_SIZE,
+	VIRTUAL_LIST_MIN_TYPE_SAMPLES,
 	type VirtualListEntry,
 	type VirtualListSizeRecord,
 } from './virtual-list-layout'
+
+import { VirtualListCellPool, type VirtualListCell } from './virtual-list-cell-pool'
+
 import { cx } from './cx'
 import { applyEscapeProps, nativeAccessibilityRole, nativeAccessibilityState } from './escape-props'
 import { layoutChildProps } from './layout-child'
@@ -18,40 +23,84 @@ function sameSize(a: number, b: number) {
 	return Math.abs(a - b) < 0.5
 }
 
+function scheduleListFrame(callback: () => void): () => void {
+	const requestFrame = (globalThis as any).requestAnimationFrame
+	const cancelFrame = (globalThis as any).cancelAnimationFrame
+	if (typeof requestFrame !== 'function' || typeof cancelFrame !== 'function') {
+		const timer = setTimeout(callback, 16)
+		return () => clearTimeout(timer)
+	}
+
+	let cancelled = false
+	let current: number | null = null
+	let next: number | null = null
+	// NativeScript dispatches an initial rAF through a macrotask. A nested
+	// request joins Choreographer/CADisplayLink rather than a free-running timer.
+	current = requestFrame(() => {
+		current = null
+		if (cancelled) return
+		next = requestFrame(() => {
+			next = null
+			if (!cancelled) callback()
+		})
+	})
+
+	return () => {
+		cancelled = true
+		if (current != null) cancelFrame(current)
+		if (next != null) cancelFrame(next)
+	}
+}
+
 interface VirtualListAnchor {
 	rowKey: string
 	index: number
 	within: number
 }
 
-/** Shared vertical virtualization over NativeScript ScrollView. Off-window
- *  rows unmount; measured row-height changes above the visible anchor adjust
- *  the native scroll offset after layout. */
+/** Shared vertical virtualization with pooled outer hosts and keyed logical
+ *  rows. Off-window item subtrees unmount; measured heights position cells and
+ *  preserve the visible keyed anchor after layout. */
 export function VirtualList<T = any>(props: VirtualListProps<T>) @{
 	const entries = useMemo(
 		() => createVirtualListEntries(props.items, props.keyExtractor, props.getItemType),
 		[props.items, props.keyExtractor, props.getItemType],
 	)
+
 	const [windowVersion, setWindowVersion] = useState(0)
 	const sizeIndexRef = useRef(new VirtualListSizeIndex())
+	const cellsRef = useRef(new VirtualListCellPool<T>())
+	const cellNodesRef = useRef(new Map<number, any>())
+	const cellCallbacksRef = useRef(new Map<number, (view: any) => void>())
+	const measuredAssignmentsRef = useRef(new Map<number, number>())
 	const sizeCacheRef = useRef(new Map<string, VirtualListSizeRecord>())
+	const typeSamplesRef = useRef(new Map<string, { sum: number; count: number }>())
+	const appliedEstimatesRef = useRef(new Map<string, number>())
+	const estimateDirtyTypesRef = useRef(new Set<string>())
 	const entriesRef = useRef<VirtualListEntry<T>[]>([])
 	const indexByRowKeyRef = useRef(new Map<string, number>())
 	const scrollRef = useRef<any>(null)
 	const scrollOffsetRef = useRef(0)
 	const viewportHeightRef = useRef(0)
 	const viewportWidthRef = useRef(0)
+	const contentWidthRef = useRef(0)
 	const headerHeightRef = useRef(0)
-	const estimateScheduledRef = useRef(false)
-	const estimateAnchorRef = useRef<VirtualListAnchor | null>(null)
+	const estimateTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null)
+	const frameCancelRef = useRef<(() => void) | null>(null)
+	const disposedRef = useRef(false)
+	const pendingOffsetDeltaRef = useRef(0)
+	const measurementsRef = useRef(
+		new Map<string, { entry: VirtualListEntry<T>; width: number; height: number; cellId: number; generation: number; view?: any }>(),
+	)
+
 	const rangeRef = useRef({ start: -1, end: -1, top: -1, bottom: -1 })
 	const pendingAnchorRef = useRef<VirtualListAnchor | null>(null)
 	const pendingAnchorRowsRef = useRef(new Set<string>())
-	const queuedAnchorRestoreRef = useRef<VirtualListAnchor | null>(null)
 	const anchorRestoreScheduledRef = useRef(false)
 	const anchorRestoreTimerRef = useRef<any>(null)
 	const hasSeparator = Boolean(props.renderSeparator)
 	const hasSeparatorRef = useRef(hasSeparator)
+	const separatorChanged = hasSeparatorRef.current !== hasSeparator
 	hasSeparatorRef.current = hasSeparator
 
 	function rebuildLayout(nextEntries: VirtualListEntry<T>[], width: number) {
@@ -65,6 +114,7 @@ export function VirtualList<T = any>(props: VirtualListProps<T>) @{
 				entry.rowKey,
 				hasSeparatorRef.current && entry.index < nextEntries.length - 1,
 			)
+
 			activeMeasurements.add(cacheKey)
 		}
 
@@ -72,13 +122,35 @@ export function VirtualList<T = any>(props: VirtualListProps<T>) @{
 			if (!activeMeasurements.has(cacheKey)) sizeCacheRef.current.delete(cacheKey)
 		}
 
+		const samples = new Map<string, { sum: number; count: number }>()
+		for (const entry of nextEntries) {
+			const cached = sizeCacheRef.current.get(virtualListMeasurementKey(
+				entry.rowKey, hasSeparatorRef.current && entry.index < nextEntries.length - 1,
+			))
+
+			if (!cached) continue
+			const sample = samples.get(entry.typeKey) ?? { sum: 0, count: 0 }
+			sample.sum += cached.height
+			sample.count++
+			samples.set(entry.typeKey, sample)
+		}
+
+		typeSamplesRef.current = samples
+		estimateDirtyTypesRef.current.clear()
+		appliedEstimatesRef.current = new Map([...samples].map(([type, sample]) => [
+			type, sample.count >= VIRTUAL_LIST_MIN_TYPE_SAMPLES
+				? sample.sum / sample.count : VIRTUAL_LIST_ESTIMATED_ROW_SIZE,
+		]))
+
 		indexByRowKeyRef.current = indexByKey
 		sizeIndexRef.current.reset(
-			estimateVirtualListSizes(nextEntries, hasSeparatorRef.current, width, sizeCacheRef.current),
+			estimateVirtualListSizes(
+				nextEntries, hasSeparatorRef.current, contentWidthRef.current || width, sizeCacheRef.current,
+			),
 		)
 	}
 
-	if (entries !== entriesRef.current) {
+	if (entries !== entriesRef.current || separatorChanged) {
 		const anchor = captureCurrentAnchor()
 		const previousByKey = new Map(entriesRef.current.map((entry) => [entry.rowKey, entry]))
 		const changedRows = entries.filter((entry) => previousByKey.get(entry.rowKey)?.item !== entry.item)
@@ -96,6 +168,7 @@ export function VirtualList<T = any>(props: VirtualListProps<T>) @{
 				)
 				.map((entry) => entry.rowKey),
 		)
+
 		pendingAnchorRef.current = pendingRows.size > 0 ? anchor : null
 		pendingAnchorRowsRef.current = pendingRows
 
@@ -112,7 +185,7 @@ export function VirtualList<T = any>(props: VirtualListProps<T>) @{
 		)
 	}
 
-	function refreshWindow() {
+	function commitWindow() {
 		const next = currentRange()
 		const previous = rangeRef.current
 		if (
@@ -126,6 +199,34 @@ export function VirtualList<T = any>(props: VirtualListProps<T>) @{
 		}
 	}
 
+	function refreshWindow() {
+		if (disposedRef.current || frameCancelRef.current != null) return
+		frameCancelRef.current = scheduleListFrame(() => {
+			frameCancelRef.current = null
+			if (disposedRef.current) return
+			const measurements = [...measurementsRef.current.values()]
+			measurementsRef.current.clear()
+			for (const measurement of measurements) {
+				if (!cellsRef.current.isCurrent(measurement.cellId, measurement.entry.rowKey, measurement.generation)) continue
+				const index = indexByRowKeyRef.current.get(measurement.entry.rowKey)
+				if (index === undefined || entriesRef.current[index]?.item !== measurement.entry.item ||
+					entriesRef.current[index]?.index !== measurement.entry.index) continue
+
+				if (measurement.view?.isLoaded === false) continue
+				if (measurement.view?.isLayoutValid === false) {
+					measurementsRef.current.set(measurement.entry.rowKey, measurement)
+					refreshWindow()
+					continue
+				}
+
+				const size = measurement.view?.getActualSize?.() ?? measurement
+				if (size.width > 0 && size.height >= 0) recordRowSize(measurement.entry.rowKey, size.width, size.height)
+			}
+
+			commitWindow()
+		})
+	}
+
 	function captureAnchor(): VirtualListAnchor | null {
 		const listOffset = scrollOffsetRef.current - headerHeightRef.current
 		if (listOffset < 0 || entriesRef.current.length === 0) return null
@@ -142,50 +243,44 @@ export function VirtualList<T = any>(props: VirtualListProps<T>) @{
 
 	function captureCurrentAnchor() {
 		const nativeOffset = Number(scrollRef.current?.verticalOffset)
-		if (Number.isFinite(nativeOffset)) scrollOffsetRef.current = nativeOffset
+		if (Number.isFinite(nativeOffset)) scrollOffsetRef.current = nativeOffset + pendingOffsetDeltaRef.current
 		return captureAnchor()
 	}
 
 	function restoreAnchor(anchor: VirtualListAnchor | null) {
-		if (!anchor) return
-		queuedAnchorRestoreRef.current = anchor
-		if (anchorRestoreScheduledRef.current) return
+		if (!anchor || disposedRef.current) return
+		const index = indexByRowKeyRef.current.get(anchor.rowKey)
 		const view = scrollRef.current
-		if (!view) return
-
+		if (index === undefined || !view) return
+		const nextOffset = Math.max(0, headerHeightRef.current + sizeIndexRef.current.prefix(index) + anchor.within)
+		const delta = nextOffset - scrollOffsetRef.current
+		if (sameSize(delta, 0)) return
+		// Apply geometry corrections to the live offset, preserving intervening input.
+		pendingOffsetDeltaRef.current += delta
+		scrollOffsetRef.current = nextOffset
+		if (anchorRestoreScheduledRef.current) return
 		anchorRestoreScheduledRef.current = true
 		const timer = setTimeout(() => {
 			if (anchorRestoreTimerRef.current !== timer) return
 			anchorRestoreTimerRef.current = null
 			anchorRestoreScheduledRef.current = false
-			if (scrollRef.current !== view) return
-
-			const queuedAnchor = queuedAnchorRestoreRef.current
-			queuedAnchorRestoreRef.current = null
-			if (!queuedAnchor) return
-			const index = indexByRowKeyRef.current.get(queuedAnchor.rowKey)
-			if (index === undefined) return
-
-			const nextOffset = Math.max(
-				0,
-				headerHeightRef.current + sizeIndexRef.current.prefix(index) + queuedAnchor.within,
-			)
+			if (disposedRef.current || scrollRef.current !== view) return
+			const correction = pendingOffsetDeltaRef.current
+			pendingOffsetDeltaRef.current = 0
 			const nativeOffset = Number(view.verticalOffset)
-			if (sameSize(nextOffset, nativeOffset)) {
-				scrollOffsetRef.current = nativeOffset
-				return
-			}
-
-			scrollOffsetRef.current = nextOffset
+			const target = Math.max(0, nativeOffset + correction)
+			scrollOffsetRef.current = target
+			if (sameSize(target, nativeOffset)) return
 			const nativeView = view.nativeViewProtected
 			const makePoint = (globalThis as any).CGPointMake
 			if (typeof nativeView?.setContentOffsetAnimated === 'function' && typeof makePoint === 'function') {
 				const current = nativeView.contentOffset
-				nativeView.setContentOffsetAnimated(makePoint(current.x, nextOffset), false)
+				nativeView.setContentOffsetAnimated(makePoint(current.x, target), false)
 			} else if (typeof view.scrollToVerticalOffset === 'function') {
-				view.scrollToVerticalOffset(nextOffset, false)
+				view.scrollToVerticalOffset(target, false)
 			}
 		}, 0)
+
 		anchorRestoreTimerRef.current = timer
 	}
 
@@ -193,21 +288,19 @@ export function VirtualList<T = any>(props: VirtualListProps<T>) @{
 		if (anchorRestoreTimerRef.current != null) clearTimeout(anchorRestoreTimerRef.current)
 		anchorRestoreTimerRef.current = null
 		anchorRestoreScheduledRef.current = false
-		queuedAnchorRestoreRef.current = null
+		pendingOffsetDeltaRef.current = 0
 	}
 
-	function scheduleEstimateRebuild(anchor: VirtualListAnchor | null) {
-		if (estimateScheduledRef.current) return
-		estimateScheduledRef.current = true
-		estimateAnchorRef.current = anchor
-		Promise.resolve().then(() => {
-			estimateScheduledRef.current = false
-			const scheduledAnchor = estimateAnchorRef.current
-			estimateAnchorRef.current = null
+	function scheduleEstimateRebuild() {
+		if (estimateTimerRef.current != null) clearTimeout(estimateTimerRef.current)
+		estimateTimerRef.current = setTimeout(() => {
+			estimateTimerRef.current = null
+			if (disposedRef.current || estimateDirtyTypesRef.current.size === 0) return
+			const anchor = captureCurrentAnchor()
 			rebuildLayout(entriesRef.current, viewportWidthRef.current)
-			restoreAnchor(scheduledAnchor)
+			restoreAnchor(anchor)
 			refreshWindow()
-		})
+		}, 120)
 	}
 
 	function recordRowSize(rowKey: string, width: number, height: number) {
@@ -220,14 +313,40 @@ export function VirtualList<T = any>(props: VirtualListProps<T>) @{
 		const hasRowSeparator = hasSeparatorRef.current && index < entriesRef.current.length - 1
 		const cacheKey = virtualListMeasurementKey(rowKey, hasRowSeparator)
 		const pendingAnchor = pendingAnchorRowsRef.current.has(rowKey) ? pendingAnchorRef.current : null
-		const anchor = pendingAnchor ?? queuedAnchorRestoreRef.current ?? captureCurrentAnchor()
+		const previous = sizeCacheRef.current.get(cacheKey)
+		if (previous && sameSize(previous.width, width) && sameSize(previous.height, height) && sameSize(sizeIndexRef.current.get(index), height)) {
+			pendingAnchorRowsRef.current.delete(rowKey)
+			if (pendingAnchorRowsRef.current.size === 0) pendingAnchorRef.current = null
+			return
+		}
+
+		const anchor = pendingAnchor ?? captureCurrentAnchor()
 		sizeCacheRef.current.set(cacheKey, { width, height })
+		const sample = typeSamplesRef.current.get(entry.typeKey) ?? { sum: 0, count: 0 }
+		sample.sum += height - (previous?.height ?? 0)
+		if (!previous) sample.count++
+		typeSamplesRef.current.set(entry.typeKey, sample)
+		const applied = appliedEstimatesRef.current.get(entry.typeKey) ?? VIRTUAL_LIST_ESTIMATED_ROW_SIZE
+		const estimateChanged = sample.count >= VIRTUAL_LIST_MIN_TYPE_SAMPLES &&
+			Math.abs(sample.sum / sample.count - applied) > Math.max(1, applied * 0.02)
+
 		const delta = sizeIndexRef.current.set(index, height)
 		if (Math.abs(delta) >= 0.5) {
 			const anchorIndex = anchor ? indexByRowKeyRef.current.get(anchor.rowKey) : undefined
 			if (anchor && anchorIndex !== undefined && index < anchorIndex) restoreAnchor(anchor)
-			refreshWindow()
-			scheduleEstimateRebuild(anchor)
+		}
+
+		// Exact measurements always apply. Tiny changes to a type average do not
+		// justify rebuilding every unvisited estimate and relaying out the list.
+		if (estimateChanged) {
+			estimateDirtyTypesRef.current.add(entry.typeKey)
+			scheduleEstimateRebuild()
+		} else {
+			estimateDirtyTypesRef.current.delete(entry.typeKey)
+			if (estimateDirtyTypesRef.current.size === 0 && estimateTimerRef.current != null) {
+				clearTimeout(estimateTimerRef.current)
+				estimateTimerRef.current = null
+			}
 		}
 
 		if (pendingAnchor) {
@@ -241,50 +360,129 @@ export function VirtualList<T = any>(props: VirtualListProps<T>) @{
 		const size = view.getActualSize?.()
 		if (!size) return
 
+		const initialViewport = viewportHeightRef.current <= 0
 		const widthChanged = !sameSize(size.width, viewportWidthRef.current)
 		viewportHeightRef.current = size.height
 		if (widthChanged) {
-			const anchor = captureAnchor()
+			const anchor = initialViewport ? null : captureCurrentAnchor()
 			viewportWidthRef.current = size.width
 			rebuildLayout(entriesRef.current, size.width)
 			restoreAnchor(anchor)
 		}
-		refreshWindow()
+
+		// Populate the first viewport before its initial native layout finishes.
+		if (initialViewport) commitWindow()
+		else refreshWindow()
 	}
 
 	function onScroll(event: any) {
 		const view = event.object ?? scrollRef.current
 		const nextOffset = Number(view?.verticalOffset ?? 0)
-		const queuedAnchor = queuedAnchorRestoreRef.current
-		if (queuedAnchor && Math.abs(nextOffset - scrollOffsetRef.current) > viewportHeightRef.current) {
-			const anchorIndex = indexByRowKeyRef.current.get(queuedAnchor.rowKey)
-			const nextIndex = sizeIndexRef.current.indexAt(
-				Math.max(0, nextOffset - headerHeightRef.current),
-			)
-			if (anchorIndex !== undefined && Math.abs(nextIndex - anchorIndex) > 1) cancelAnchorRestore()
+		if (Math.abs(nextOffset + pendingOffsetDeltaRef.current - scrollOffsetRef.current) > viewportHeightRef.current) {
+			cancelAnchorRestore()
 		}
-		scrollOffsetRef.current = nextOffset
+
+		if (!sameSize(nextOffset + pendingOffsetDeltaRef.current, scrollOffsetRef.current)) {
+			pendingAnchorRef.current = null
+			pendingAnchorRowsRef.current.clear()
+		}
+
+		scrollOffsetRef.current = nextOffset + pendingOffsetDeltaRef.current
+		if (estimateTimerRef.current != null) scheduleEstimateRebuild()
+		refreshWindow()
+	}
+
+	function onContentLayout(event: any) {
+		const width = Number(event.object?.getActualSize?.().width ?? 0)
+		if (width <= 0 || sameSize(width, contentWidthRef.current)) return
+		const anchor = scrollOffsetRef.current > 0 ? captureCurrentAnchor() : null
+		contentWidthRef.current = width
+		rebuildLayout(entriesRef.current, viewportWidthRef.current)
+		restoreAnchor(anchor)
 		refreshWindow()
 	}
 
 	function onHeaderLayout(event: any) {
 		const height = Number(event.object?.getActualSize?.().height ?? 0)
 		if (sameSize(height, headerHeightRef.current)) return
-		const anchor = captureAnchor()
+		const anchor = scrollOffsetRef.current > 0 ? captureCurrentAnchor() : null
 		headerHeightRef.current = height
 		restoreAnchor(anchor)
 		refreshWindow()
 	}
 
-	function onRowLayout(entry: VirtualListEntry<T>, event: any) {
+	function cellCallback(id: number) {
+		let callback = cellCallbacksRef.current.get(id)
+		if (!callback) {
+			callback = (view: any) => {
+				if (view) {
+					// Preserve native widgets when the renderer moves a keyed host.
+					view.reusable = true
+					cellNodesRef.current.set(id, view)
+				} else {
+					cellNodesRef.current.get(id)?.destroyNode?.(true)
+					cellNodesRef.current.delete(id)
+					cellCallbacksRef.current.delete(id)
+				}
+			}
+
+			cellCallbacksRef.current.set(id, callback)
+		}
+
+		return callback
+	}
+
+	function onRowLayout(cell: VirtualListCell<T>, event: any) {
+		const entry = cell.entry
 		const size = event.object?.getActualSize?.()
-		if (size) recordRowSize(entry.rowKey, size.width, size.height)
+		if (!entry || !size || disposedRef.current) return
+		measurementsRef.current.set(entry.rowKey, { entry, width: size.width, height: size.height, cellId: cell.id, generation: cell.generation })
+		refreshWindow()
 	}
 
+	useEffect(() => {
+		disposedRef.current = false
+		return () => {
+			disposedRef.current = true
+			frameCancelRef.current?.()
+			if (estimateTimerRef.current != null) clearTimeout(estimateTimerRef.current)
+			frameCancelRef.current = null
+			estimateTimerRef.current = null
+			measurementsRef.current.clear()
+			cellsRef.current.clear()
+			cellNodesRef.current.clear()
+			cellCallbacksRef.current.clear()
+			measuredAssignmentsRef.current.clear()
+			cancelAnchorRestore()
+		}
+	}, [])
+
 	const range = currentRange()
 	rangeRef.current = range
 	void windowVersion
-	const visibleEntries = entries.slice(range.start, range.end)
+	const cells = cellsRef.current.update(entries.slice(range.start, range.end)).map((cell) => ({
+		...cell, top: cell.entry ? sizeIndexRef.current.prefix(cell.entry.index) : 0,
+	}))
+
+	const contentHeight = sizeIndexRef.current.total
+	useEffect(() => {
+		for (const cell of cells) {
+			if (!cell.entry || measuredAssignmentsRef.current.get(cell.id) === cell.generation) continue
+			const view = cellNodesRef.current.get(cell.id)
+			if (!view) continue
+			measuredAssignmentsRef.current.set(cell.id, cell.generation)
+			measurementsRef.current.set(cell.entry.rowKey, {
+				entry: cell.entry, width: 0, height: 0, view, cellId: cell.id, generation: cell.generation,
+			})
+
+			refreshWindow()
+		}
+
+		for (const id of measuredAssignmentsRef.current.keys()) {
+			if (!cellNodesRef.current.has(id)) measuredAssignmentsRef.current.delete(id)
+		}
+	}, [cells])
+
 	const style = { ...props.style, minHeight: props.style?.minHeight ?? 0 }
 
 	<scrollview
@@ -308,7 +506,7 @@ export function VirtualList<T = any>(props: VirtualListProps<T>) @{
 		onLayoutChanged={(event: any) => syncViewport(event.object)}
 		onScroll={onScroll}
 	>
-		<flexboxlayout flexDirection="column" className={cx('vx-virtual-list-content')}>
+		<flexboxlayout flexDirection="column" className={cx('vx-virtual-list-content')} onLayoutChanged={onContentLayout}>
 			{props.renderHeader ? (
 				<flexboxlayout
 					flexDirection="column"
@@ -326,27 +524,33 @@ export function VirtualList<T = any>(props: VirtualListProps<T>) @{
 					</flexboxlayout>
 				) : null
 			) : (
-				<>
-					<flexboxlayout className="vx-virtual-list-spacer" style={{ height: range.top, flexShrink: 0 }} />
-					@for (const entry of visibleEntries; key entry.rowKey) {
+				<absolutelayout className="vx-virtual-list-body" style={{ height: contentHeight, flexShrink: 0 }}>
+					@for (const cell of cells; key cell.id) {
 						<flexboxlayout
+							ref={cellCallback(cell.id)}
 							flexDirection="column"
-							className="vx-virtual-list-row"
-							style={{ flexShrink: 0 }}
-							onLayoutChanged={(event: any) => onRowLayout(entry, event)}
+							className={cell.entry ? 'vx-virtual-list-cell vx-virtual-list-row' : 'vx-virtual-list-cell'}
+							visibility={cell.entry ? 'visible' : 'collapse'}
+							left={0}
+							top={cell.top}
+							width={contentWidthRef.current || viewportWidthRef.current || '100%'}
+							onLayoutChanged={(event: any) => onRowLayout(cell, event)}
 						>
-							<flexboxlayout flexDirection="column" className="vx-virtual-list-item">
-								{props.renderItem(entry.item, entry.index)}
-							</flexboxlayout>
-							{hasSeparator && entry.index < entries.length - 1 ? (
-								<flexboxlayout flexDirection="column" className="vx-virtual-list-separator">
-									{props.renderSeparator?.()}
-								</flexboxlayout>
-							) : null}
+							@for (const entry of cell.rows; key entry.rowKey) {
+								<>
+									<flexboxlayout flexDirection="column" className="vx-virtual-list-item">
+										{props.renderItem(entry.item, entry.index)}
+									</flexboxlayout>
+									{hasSeparator && entry.index < entries.length - 1 ? (
+										<flexboxlayout flexDirection="column" className="vx-virtual-list-separator">
+											{props.renderSeparator?.()}
+										</flexboxlayout>
+									) : null}
+								</>
+							}
 						</flexboxlayout>
 					}
-					<flexboxlayout className="vx-virtual-list-spacer" style={{ height: range.bottom, flexShrink: 0 }} />
-				</>
+				</absolutelayout>
 			)}
 			{props.renderFooter ? (
 				<flexboxlayout flexDirection="column" className="vx-virtual-list-footer" flexShrink={0}>