Merge pull request #1149 from microbiomedata/1034-url-query-fix

Add debounce to fetch results when conditions change
microbiomedata · Feb 23, 2024 · 492f894 · 492f894
2 parents b44467f + e1d41fa
commit 492f894
Showing 1 changed file with 8 additions and 4 deletions.
diff --git a/web/src/use/usePaginatedResults.ts b/web/src/use/usePaginatedResults.ts
@@ -1,6 +1,7 @@
 import {
   watch, Ref, computed, toRef, shallowReactive,
 } from '@vue/composition-api';
+import { debounce } from 'lodash';
 import {
   SearchParams, Condition, DataObjectFilter, SearchResponse,
 } from '@/data/api';
@@ -40,21 +41,24 @@ export default function usePaginatedResult<T>(
     });
   }
 
+  const debouncedFetchResults = debounce(fetchResults, 500);
+
   watch([
     toRef(data, 'limit'),
     toRef(data, 'offset'),
-  ], fetchResults);
+  ], debouncedFetchResults);
+
   watch([conditions], () => {
     const doFetch = data.offset === 0;
     data.offset = 0;
     data.limit = limit;
-    if (doFetch) fetchResults();
+    if (doFetch) debouncedFetchResults();
   });
 
   if (dataObjectFilter !== undefined) {
-    watch(dataObjectFilter, fetchResults, { deep: true });
+    watch(dataObjectFilter, debouncedFetchResults, { deep: true });
   }
-  fetchResults();
+  debouncedFetchResults();
   // ENDTODO
 
   function setPage(newPage: number) {