add window overscan

WordPress · Sep 30, 2021 · 2be5be2 · 2be5be2
1 parent 85ebc91
commit 2be5be2
Show file tree

Hide file tree

Showing 2 changed files with 27 additions and 25 deletions.
diff --git a/packages/block-editor/src/components/list-view/branch.js b/packages/block-editor/src/components/list-view/branch.js
@@ -47,7 +47,7 @@ export default function ListViewBranch( props ) {
 		isBranchSelected = false,
 		isLastOfBranch = false,
 		listPosition = 0,
-		measurement,
+		windowMeasurement,
 		globalBlockCount,
 	} = props;
 
@@ -129,19 +129,20 @@ export default function ListViewBranch( props ) {
 						expandedState
 					);
 				}
-				const end = measurement.start + measurement.maxVisible;
+				const { start, maxVisible } = windowMeasurement;
+				const end = start + maxVisible;
 				const blockInView =
-					measurement.start <= nextPosition &&
-					nextPosition <= measurement.start + measurement.maxVisible;
+					start <= nextPosition && nextPosition <= start + maxVisible;
 
 				const style = {
-					...( measurement.start === nextPosition
-						? { paddingTop: ITEM_HEIGHT * measurement.start }
+					...( start === nextPosition
+						? { paddingTop: ITEM_HEIGHT * start }
 						: {} ),
 					...( globalBlockCount > end && end === nextPosition
 						? {
 								paddingBottom:
-									ITEM_HEIGHT * ( globalBlockCount - end ),
+									ITEM_HEIGHT *
+									( globalBlockCount - end - 1 ),
 						  }
 						: {} ),
 				};
@@ -184,7 +185,7 @@ export default function ListViewBranch( props ) {
 								terminatedLevels={ updatedTerminatedLevels }
 								path={ updatedPath }
 								listPosition={ nextPosition + 1 }
-								measurement={ measurement }
+								windowMeasurement={ windowMeasurement }
 								globalBlockCount={ globalBlockCount }
 							/>
 						) }

diff --git a/packages/block-editor/src/components/list-view/index.js b/packages/block-editor/src/components/list-view/index.js
@@ -21,11 +21,18 @@ import {
 } from '@wordpress/element';
 import { __ } from '@wordpress/i18n';
 
-function measure( scrollContainer, setMeasurement ) {
-	const maxVisible = Math.ceil( scrollContainer.clientHeight / ITEM_HEIGHT );
-	const start = Math.floor( scrollContainer.scrollTop / ITEM_HEIGHT );
-	setMeasurement( {
-		maxVisible,
+const WINDOW_OVERSCAN = 1;
+const ITEM_HEIGHT = 36;
+
+function measureWindow( scrollContainer, setWindowMeasurement ) {
+	const maxVisible = Math.floor( scrollContainer.clientHeight / ITEM_HEIGHT );
+	const start = Math.max(
+		0,
+		Math.floor( scrollContainer.scrollTop / ITEM_HEIGHT ) - WINDOW_OVERSCAN
+	);
+	//avoids scroll thrashing when scrolled to bottom
+	setWindowMeasurement( {
+		maxVisible: maxVisible + WINDOW_OVERSCAN,
 		start,
 	} );
 }
@@ -52,8 +59,6 @@ const expanded = ( state, action ) => {
 	}
 };
 
-const ITEM_HEIGHT = 36;
-
 /**
  * Wrap `ListViewRows` with `TreeGrid`. ListViewRows is a
  * recursive component (it renders itself), so this ensures TreeGrid is only
@@ -112,27 +117,24 @@ function ListView(
 		isMounted.current = true;
 	}, [] );
 
-	//TODO: needs tuning for scroll position
-	const [ scrollHeight, setScrollHeight ] = useState(
-		ITEM_HEIGHT * globalBlockCount
-	);
-	const [ measurement, setMeasurement ] = useState( {
+	const [ windowMeasurement, setWindowMeasurement ] = useState( {
 		maxVisible: 30,
 		start: 0,
 	} );
 
 	useLayoutEffect( () => {
 		const scrollContainer = elementRef.current.parentNode;
-		measure( scrollContainer, setMeasurement );
+		measureWindow( scrollContainer, setWindowMeasurement );
 		const measureListOnScroll = throttle( ( event ) => {
-			measure( event.target, setMeasurement );
+			measureWindow( event.target, setWindowMeasurement );
 		}, 16 );
 		scrollContainer.addEventListener( 'scroll', measureListOnScroll );
-		return () =>
+		return () => {
 			scrollContainer.removeEventListener(
 				'scroll',
 				measureListOnScroll
 			);
+		};
 	}, [] );
 
 	const expand = useCallback(
@@ -182,7 +184,6 @@ function ListView(
 			collapse,
 		]
 	);
-
 	return (
 		<AsyncModeProvider value={ true }>
 			<ListViewDropIndicator
@@ -200,7 +201,7 @@ function ListView(
 					<ListViewBranch
 						blocks={ clientIdsTree }
 						selectBlock={ selectEditorBlock }
-						measurement={ measurement }
+						windowMeasurement={ windowMeasurement }
 						globalBlockCount={ globalBlockCount }
 						{ ...props }
 					/>