[DT-987]Debounce the dataset search and filter in the Data Library (#…

…2730)

Co-authored-by: rjohanek <rjohanek@broadinstitute.org>

src/components/data_search/DatasetSearchTable.jsx

@@ -3,7 +3,7 @@ import Tabs from '@mui/material/Tabs';
 import useOnMount from '@mui/utils/useOnMount';
 import * as React from 'react';
 import { Box, Button } from '@mui/material';
-import { useEffect, useState } from 'react';
+import { useEffect, useRef, useState } from 'react';
 import { isEmpty } from 'lodash';
 import { TerraDataRepo } from '../../libs/ajax/TerraDataRepo';
 import { DatasetSearchTableDisplay } from './DatasetSearchTableDisplay';
@@ -211,13 +211,18 @@ export const DatasetSearchTable = (props) => {
     getExportableDatasets(datasets);
   });
 
-  useEffect(() => {
-    const fullQuery = assembleFullQuery();
-    try {
+  const searchAndFilter = useRef(
+    _.debounce((fullQuery) => {
       DataSet.searchDatasetIndex(fullQuery).then((filteredDatasets) => {
         const newFiltered = datasets.filter(value => filteredDatasets.some(item => _.isEqual(item, value)));
         setFiltered(newFiltered);
       });
+    }, 150));
+
+  useEffect(() => {
+    const fullQuery = assembleFullQuery();
+    try {
+      searchAndFilter.current(fullQuery);
     } catch (error) {
       Notifications.showError({ text: 'Failed to load Elasticsearch index' });
     }  }, [filters, searchTerm]); // eslint-disable-line