From bbf6435d62787148f0245f99182335bd567c9473 Mon Sep 17 00:00:00 2001
From: ntsekouras <ntsekouras@outlook.com>
Date: Thu, 10 Sep 2020 18:23:31 +0300
Subject: [PATCH] debounce search requests

---
 .../src/query/edit/query-toolbar.js           | 21 +++++++++++++++----
 1 file changed, 17 insertions(+), 4 deletions(-)

diff --git a/packages/block-library/src/query/edit/query-toolbar.js b/packages/block-library/src/query/edit/query-toolbar.js
index 0b3841436a6c5..3436348975e24 100644
--- a/packages/block-library/src/query/edit/query-toolbar.js
+++ b/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 ) }
 						/>
 					</>
 				) }