fix: search text flickering (#1999)

Fix flickering issue in search field.

src/library-authoring/LibraryAuthoringPage.test.tsx

@@ -370,7 +370,7 @@ describe('<LibraryAuthoringPage />', () => {
     fireEvent.change(searchBox, { target: { value: 'words to find' } });
 
     // Default sort option changes to "Most Relevant"
-    expect(screen.getAllByText('Most Relevant').length).toEqual(2);
+    expect((await screen.findAllByText('Most Relevant')).length).toEqual(2);
     await waitFor(() => {
       expect(fetchMock).toHaveBeenLastCalledWith(searchEndpoint, {
         body: expect.stringContaining('"sort":[]'),

src/library-authoring/collections/LibraryCollectionPage.test.tsx

@@ -315,7 +315,7 @@ describe('<LibraryCollectionPage />', () => {
     fireEvent.change(searchBox, { target: { value: 'words to find' } });
 
     // Default sort option changes to "Most Relevant"
-    expect(screen.getAllByText('Most Relevant').length).toEqual(2);
+    expect((await screen.findAllByText('Most Relevant')).length).toEqual(2);
     await waitFor(() => {
       expect(fetchMock).toHaveBeenLastCalledWith(searchEndpoint, {
         body: expect.stringContaining('"sort":[]'),

src/search-manager/SearchKeywordsField.tsx

@@ -1,6 +1,7 @@
 import React from 'react';
 import { useIntl } from '@edx/frontend-platform/i18n';
 import { SearchField } from '@openedx/paragon';
+import { debounce } from 'lodash';
 import messages from './messages';
 import { useSearchContext } from './SearchManager';
 
@@ -17,10 +18,15 @@ const SearchKeywordsField: React.FC<{
   const defaultPlaceholder = usageKey ? messages.clearUsageKeyToSearch : messages.inputPlaceholder;
   const { placeholder = intl.formatMessage(defaultPlaceholder) } = props;
 
+  const handleSearch = React.useCallback(
+    debounce((term) => setSearchKeywords(term.trim()), 400),
+    [searchKeywords],
+  );// Perform search after 500ms
+
   return (
     <SearchField.Advanced
       onSubmit={setSearchKeywords}
-      onChange={setSearchKeywords}
+      onChange={handleSearch}
       onClear={() => setSearchKeywords('')}
       value={searchKeywords}
       className={props.className}