List View: test if using placeholders has a performance impact

WordPress · Oct 14, 2021 · 5ba2da9 · 5ba2da9
1 parent 97515b5
commit 5ba2da9
Show file tree

Hide file tree

Showing 2 changed files with 12 additions and 28 deletions.
diff --git a/packages/block-editor/src/components/list-view/branch.js b/packages/block-editor/src/components/list-view/branch.js
@@ -101,33 +101,10 @@ export default function ListViewBranch( props ) {
 		}
 
 		const usesWindowing = __experimentalPersistentListViewFeatures;
-		const {
-			start,
-			end,
-			itemInView,
-			startPadding,
-			endPadding,
-		} = fixedListWindow;
+		const { itemInView } = fixedListWindow;
 
 		const blockInView = ! usesWindowing || itemInView( nextPosition );
 
-		const isDragging = draggedClientIds?.length > 0;
-		if (
-			usesWindowing &&
-			! isDragging &&
-			! blockInView &&
-			nextPosition > start
-		) {
-			// found the end of the window, don't bother processing the rest of the items
-			break;
-		}
-		const style = usesWindowing
-			? {
-					paddingTop: start === nextPosition ? startPadding : 0,
-					paddingBottom: end === nextPosition ? endPadding : 0,
-			  }
-			: undefined;
-
 		const position = index + 1;
 		const isLastRowAtLevel = rowCount === position;
 		const updatedTerminatedLevels = isLastRowAtLevel
@@ -192,9 +169,15 @@ export default function ListViewBranch( props ) {
 						path={ updatedPath }
 						isExpanded={ isExpanded }
 						listPosition={ nextPosition }
-						style={ style }
 					/>
 				) }
+				{ ! isDragged && ! blockInView && (
+					<tr>
+						<td style={ { height: 36, padding: 0 } }>
+							Placeholder
+						</td>
+					</tr>
+				) }
 				{ hasNestedBranch && isExpanded && ! isDragged && (
 					<ListViewBranch
 						blocks={ innerBlocks }

diff --git a/packages/compose/src/hooks/use-fixed-window-list/index.js b/packages/compose/src/hooks/use-fixed-window-list/index.js
@@ -81,19 +81,20 @@ export default function useFixedWindowList(
 				totalItems - 1,
 				start + visibleItems + windowOverscan
 			);
-			setFixedListWindow( {
+			const nextWindow = {
 				visibleItems,
 				start,
 				end,
-				itemInView: ( index ) => {
+				itemInView: ( /** @type {number} */ index ) => {
 					return start <= index && index <= end;
 				},
 				startPadding: itemHeight * start,
 				endPadding:
 					totalItems > end
 						? itemHeight * ( totalItems - end - 1 )
 						: 0,
-			} );
+			};
+			setFixedListWindow( nextWindow );
 		};
 		const handleKeyDown = ( /** @type {KeyboardEvent} */ event ) => {
 			switch ( event.keyCode ) {