Merge pull request #392 from preactjs/tree-view-indent

Improve layout measurement for virtualized lists

src/shells/shared/utils.ts

@@ -37,7 +37,10 @@ export function throttle<T extends any[]>(
 		if (!running) {
 			callback(...args);
 			running = true;
-			setTimeout(() => (running = false), wait);
+			setTimeout(() => {
+				running = false;
+				callback(...args);
+			}, wait);
 		}
 	};
 }

src/view/components/elements/VirtualizedList.tsx

@@ -2,7 +2,6 @@ import { RefObject, VNode } from "preact";
 import {
 	useCallback,
 	useEffect,
-	useLayoutEffect,
 	useMemo,
 	useRef,
 	useState,
@@ -83,12 +82,6 @@ export function useVirtualizedList<T>({
 		[rowHeight],
 	);
 
-	useLayoutEffect(() => {
-		if (container.current) {
-			setHeight(container.current.clientHeight);
-		}
-	}, []);
-
 	useEffect(() => {
 		const scrollFn = (e: Event) => {
 			const top = (e.target as Element).scrollTop;
@@ -109,11 +102,15 @@ export function useVirtualizedList<T>({
 		};
 	}, [container.current]);
 
-	useResize(() => {
-		if (container.current) {
-			setHeight(container.current.clientHeight);
-		}
-	}, []);
+	useResize(
+		() => {
+			if (container.current) {
+				setHeight(container.current.clientHeight);
+			}
+		},
+		[],
+		true,
+	);
 
 	const vnodes = useMemo(() => {
 		const vnodes: VNode[] = [];

src/view/components/utils.ts

@@ -1,4 +1,4 @@
-import { useEffect, useContext, useLayoutEffect } from "preact/hooks";
+import { useContext, useLayoutEffect } from "preact/hooks";
 import { WindowCtx } from "../store/react-bindings";
 import { throttle } from "../../shells/shared/utils";
 
@@ -11,15 +11,13 @@ export function useResize(fn: () => void, args: any[], init = false) {
 	// the global window object instead.
 	const win = useContext(WindowCtx) || window;
 
-	useEffect(() => {
+	useLayoutEffect(() => {
 		if (init) fn();
-	}, []);
 
-	useLayoutEffect(() => {
 		const fn2 = throttle(fn, 60);
 		win.addEventListener("resize", fn2);
 		return () => {
 			win.removeEventListener("resize", fn2);
 		};
-	}, args);
+	}, [...args, init]);
 }

test-e2e/tests/profiler/ranked/profiler-ranked.test.ts

@@ -22,7 +22,7 @@ export async function run(config: any) {
 	await clickRecordButton(devtools);
 
 	const nodes = await devtools.$$(
-		'[data-type="ranked"] > *:not([data-weight])',
+		'[data-type="ranked"] [data-id]:not([data-weight])',
 	);
 	expect(nodes.length).to.equal(0);