debounce search requests

packages/block-library/src/query/edit/query-toolbar.js

@@ -1,7 +1,13 @@
+/**
+ * External dependencies
+ */
+import { debounce } from 'lodash';
+
 /**
  * WordPress dependencies
  */
 import { useSelect } from '@wordpress/data';
+import { useEffect, useState, useCallback } from '@wordpress/element';
 import {
 	Toolbar,
 	Dropdown,
@@ -34,6 +40,15 @@ export default function QueryToolbar( { query, setQuery } ) {
 			tags: getTermsInfo( _tags ),
 		};
 	}, [] );
+	const [ querySearch, setQuerySearch ] = useState( query.search );
+	const onChangeDebounced = useCallback(
+		debounce( () => setQuery( { search: querySearch } ), 250 ),
+		[ querySearch ]
+	);
+	useEffect( () => {
+		onChangeDebounced();
+		return onChangeDebounced.cancel;
+	}, [ querySearch, onChangeDebounced ] );
 
 	// Handles categories and tags changes.
 	const onTermsChange = ( terms, queryProperty ) => ( newTermValues ) => {
@@ -116,10 +131,8 @@ export default function QueryToolbar( { query, setQuery } ) {
 						) }
 						<TextControl
 							label={ __( 'Search' ) }
-							value={ query.search }
-							onChange={ ( value ) =>
-								setQuery( { search: value } )
-							}
+							value={ querySearch }
+							onChange={ ( value ) => setQuerySearch( value ) }
 						/>
 					</>
 				) }