WIP just testing perf metrics

WordPress · Nov 5, 2024 · c43b2e5 · c43b2e5
1 parent ae29450
commit c43b2e5
Show file tree

Hide file tree

Showing 2 changed files with 5 additions and 37 deletions.
diff --git a/packages/block-editor/src/components/inserter/block-types-tab.js b/packages/block-editor/src/components/inserter/block-types-tab.js
@@ -3,7 +3,6 @@
  */
 import { __, _x } from '@wordpress/i18n';
 import { useMemo, useEffect, forwardRef } from '@wordpress/element';
-import { useAsyncList } from '@wordpress/compose';
 
 /**
  * Internal dependencies
@@ -19,14 +18,6 @@ const getBlockNamespace = ( item ) => item.name.split( '/' )[ 0 ];
 
 const MAX_SUGGESTED_ITEMS = 6;
 
-/**
- * Shared reference to an empty array for cases where it is important to avoid
- * returning a new array reference on every invocation and rerendering the component.
- *
- * @type {Array}
- */
-const EMPTY_ARRAY = [];
-
 export function BlockTypesTabPanel( {
 	items,
 	collections,
@@ -65,24 +56,6 @@ export function BlockTypesTabPanel( {
 	// Hide block preview on unmount.
 	useEffect( () => () => onHover( null ), [] );
 
-	/**
-	 * The inserter contains a big number of blocks and opening it is a costful operation.
-	 * The rendering is the most costful part of it, in order to improve the responsiveness
-	 * of the "opening" action, these lazy lists allow us to render the inserter category per category,
-	 * once all the categories are rendered, we start rendering the collections and the uncategorized block types.
-	 */
-	const currentlyRenderedCategories = useAsyncList( categories );
-	const didRenderAllCategories =
-		categories.length === currentlyRenderedCategories.length;
-
-	// Async List requires an array.
-	const collectionEntries = useMemo( () => {
-		return Object.entries( collections );
-	}, [ collections ] );
-	const currentlyRenderedCollections = useAsyncList(
-		didRenderAllCategories ? collectionEntries : EMPTY_ARRAY
-	);
-
 	return (
 		<div className={ className }>
 			{ showMostUsedBlocks &&
@@ -100,7 +73,7 @@ export function BlockTypesTabPanel( {
 					</InserterPanel>
 				) }
 
-			{ currentlyRenderedCategories.map( ( category ) => {
+			{ categories.map( ( category ) => {
 				const categoryItems = items.filter(
 					( item ) => item.category === category.slug
 				);
@@ -123,7 +96,7 @@ export function BlockTypesTabPanel( {
 				);
 			} ) }
 
-			{ didRenderAllCategories && uncategorizedItems.length > 0 && (
+			{ uncategorizedItems.length > 0 && (
 				<InserterPanel
 					className="block-editor-inserter__uncategorized-blocks-panel"
 					title={ __( 'Uncategorized' ) }
@@ -137,7 +110,7 @@ export function BlockTypesTabPanel( {
 				</InserterPanel>
 			) }
 
-			{ currentlyRenderedCollections.map(
+			{ Object.entries( collections ).map(
 				( [ namespace, collection ] ) => {
 					const collectionItems = itemsPerCollection[ namespace ];
 					if ( ! collectionItems || ! collectionItems.length ) {

diff --git a/packages/block-editor/src/components/inserter/search-results.js b/packages/block-editor/src/components/inserter/search-results.js
@@ -4,7 +4,7 @@
 import { useMemo, useEffect } from '@wordpress/element';
 import { __, _n, sprintf } from '@wordpress/i18n';
 import { VisuallyHidden } from '@wordpress/components';
-import { useDebounce, useAsyncList } from '@wordpress/compose';
+import { useDebounce } from '@wordpress/compose';
 import { speak } from '@wordpress/a11y';
 import { useSelect } from '@wordpress/data';
 
@@ -25,7 +25,6 @@ import { orderBy } from '../../utils/sorting';
 import { orderInserterBlockItems } from '../../utils/order-inserter-block-items';
 import { store as blockEditorStore } from '../../store';
 
-const INITIAL_INSERTER_RESULTS = 9;
 /**
  * Shared reference to an empty array for cases where it is important to avoid
  * returning a new array reference on every invocation and rerendering the component.
@@ -156,10 +155,6 @@ function InserterSearchResults( {
 		filteredBlockPatterns,
 	] );
 
-	const currentShownBlockTypes = useAsyncList( filteredBlockTypes, {
-		step: INITIAL_INSERTER_RESULTS,
-	} );
-
 	const hasItems =
 		filteredBlockTypes.length > 0 || filteredBlockPatterns.length > 0;
 
@@ -168,7 +163,7 @@ function InserterSearchResults( {
 			title={ <VisuallyHidden>{ __( 'Blocks' ) }</VisuallyHidden> }
 		>
 			<BlockTypesList
-				items={ currentShownBlockTypes }
+				items={ filteredBlockTypes }
 				onSelect={ onSelectBlockType }
 				onHover={ onHover }
 				label={ __( 'Blocks' ) }