From 9ca92adec8303df0094b6eebaeed714df69a356a Mon Sep 17 00:00:00 2001
From: George Mamadashvili <georgemamadashvili@gmail.com>
Date: Fri, 9 Feb 2024 09:07:54 +0400
Subject: [PATCH] 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>
---
 package-lock.json                             |  2 ++
 packages/core-commands/package.json           |  1 +
 .../src/site-editor-navigation-commands.js    | 35 +++++++++++++++----
 3 files changed, 32 insertions(+), 6 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 996b9ade377d1d..8d4ed2eecf482a 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -54129,6 +54129,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",
@@ -69246,6 +69247,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/package.json b/packages/core-commands/package.json
index e116db47b014c5..fbaccfa3ceda2b 100644
--- 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
index 45d2dc6c47ad77..695ad00e567203 100644
--- 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( () => {