From 7298167f41a7206f96d77833a4db5433fc624041 Mon Sep 17 00:00:00 2001
From: Mary Salvi <mary.salvi@kitware.com>
Date: Thu, 22 Feb 2024 11:08:46 -0500
Subject: [PATCH 1/2] Add debounce to fetch results when conditions change

---
 web/src/use/usePaginatedResults.ts | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

diff --git a/web/src/use/usePaginatedResults.ts b/web/src/use/usePaginatedResults.ts
index d38799ad..944000c6 100644
--- 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';
@@ -44,12 +45,13 @@ export default function usePaginatedResult<T>(
     toRef(data, 'limit'),
     toRef(data, 'offset'),
   ], fetchResults);
-  watch([conditions], () => {
+
+  watch([conditions], debounce(() => {
     const doFetch = data.offset === 0;
     data.offset = 0;
     data.limit = limit;
     if (doFetch) fetchResults();
-  });
+  }, 500));
 
   if (dataObjectFilter !== undefined) {
     watch(dataObjectFilter, fetchResults, { deep: true });

From e1d41fa1675df8bfb6f45de82f07038c671c13bb Mon Sep 17 00:00:00 2001
From: Mary Salvi <mary.salvi@kitware.com>
Date: Fri, 23 Feb 2024 15:41:47 -0500
Subject: [PATCH 2/2] Debounce fetchResults instead of watch

---
 web/src/use/usePaginatedResults.ts | 14 ++++++++------
 1 file changed, 8 insertions(+), 6 deletions(-)

diff --git a/web/src/use/usePaginatedResults.ts b/web/src/use/usePaginatedResults.ts
index 944000c6..e8db5738 100644
--- a/web/src/use/usePaginatedResults.ts
+++ b/web/src/use/usePaginatedResults.ts
@@ -41,22 +41,24 @@ export default function usePaginatedResult<T>(
     });
   }
 
+  const debouncedFetchResults = debounce(fetchResults, 500);
+
   watch([
     toRef(data, 'limit'),
     toRef(data, 'offset'),
-  ], fetchResults);
+  ], debouncedFetchResults);
 
-  watch([conditions], debounce(() => {
+  watch([conditions], () => {
     const doFetch = data.offset === 0;
     data.offset = 0;
     data.limit = limit;
-    if (doFetch) fetchResults();
-  }, 500));
+    if (doFetch) debouncedFetchResults();
+  });
 
   if (dataObjectFilter !== undefined) {
-    watch(dataObjectFilter, fetchResults, { deep: true });
+    watch(dataObjectFilter, debouncedFetchResults, { deep: true });
   }
-  fetchResults();
+  debouncedFetchResults();
   // ENDTODO
 
   function setPage(newPage: number) {