Commands: Try debouncing search for post-type navigation (#58810)

* Commands: Try debouncing search for post-type navigation * Update delay Co-authored-by: Mamaduka <mamaduka@git.wordpress.org> Co-authored-by: youknowriad <youknowriad@git.wordpress.org>
WordPress · Feb 9, 2024 · 9ca92ad · 9ca92ad
1 parent 0ba8692
commit 9ca92ad
Show file tree

Hide file tree

Showing 3 changed files with 32 additions and 6 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/packages/core-commands/package.json b/packages/core-commands/package.json
@@ -29,6 +29,7 @@
 		"@babel/runtime": "^7.16.0",
 		"@wordpress/block-editor": "file:../block-editor",
 		"@wordpress/commands": "file:../commands",
+		"@wordpress/compose": "file:../compose",
 		"@wordpress/core-data": "file:../core-data",
 		"@wordpress/data": "file:../data",
 		"@wordpress/element": "file:../element",

diff --git a/packages/core-commands/src/site-editor-navigation-commands.js b/packages/core-commands/src/site-editor-navigation-commands.js
@@ -3,7 +3,7 @@
  */
 import { useCommandLoader } from '@wordpress/commands';
 import { __ } from '@wordpress/i18n';
-import { useMemo } from '@wordpress/element';
+import { useMemo, useEffect, useState } from '@wordpress/element';
 import { useSelect } from '@wordpress/data';
 import { store as coreStore } from '@wordpress/core-data';
 import {
@@ -16,6 +16,7 @@ import {
 } from '@wordpress/icons';
 import { privateApis as routerPrivateApis } from '@wordpress/router';
 import { getQueryArg, addQueryArgs, getPath } from '@wordpress/url';
+import { useDebounce } from '@wordpress/compose';
 
 /**
  * Internal dependencies
@@ -33,17 +34,35 @@ const icons = {
 	wp_template_part: symbolFilled,
 };
 
+function useDebouncedValue( value ) {
+	const [ debouncedValue, setDebouncedValue ] = useState( '' );
+	const debounced = useDebounce( setDebouncedValue, 250 );
+
+	useEffect( () => {
+		debounced( value );
+		return () => debounced.cancel();
+	}, [ debounced, value ] );
+
+	return debouncedValue;
+}
+
 const getNavigationCommandLoaderPerPostType = ( postType ) =>
 	function useNavigationCommandLoader( { search } ) {
 		const history = useHistory();
 		const isBlockBasedTheme = useIsBlockBasedTheme();
+		const delayedSearch = useDebouncedValue( search );
 		const { records, isLoading } = useSelect(
 			( select ) => {
-				const { getEntityRecords } = select( coreStore );
+				if ( ! delayedSearch ) {
+					return {
+						isLoading: false,
+					};
+				}
+
 				const query = {
-					search: !! search ? search : undefined,
+					search: delayedSearch,
 					per_page: 10,
-					orderby: search ? 'relevance' : 'date',
+					orderby: 'relevance',
 					status: [
 						'publish',
 						'future',
@@ -53,14 +72,18 @@ const getNavigationCommandLoaderPerPostType = ( postType ) =>
 					],
 				};
 				return {
-					records: getEntityRecords( 'postType', postType, query ),
+					records: select( coreStore ).getEntityRecords(
+						'postType',
+						postType,
+						query
+					),
 					isLoading: ! select( coreStore ).hasFinishedResolution(
 						'getEntityRecords',
 						[ 'postType', postType, query ]
 					),
 				};
 			},
-			[ search ]
+			[ delayedSearch ]
 		);
 
 		const commands = useMemo( () => {