diff --git a/web/src/use/usePaginatedResults.ts b/web/src/use/usePaginatedResults.ts index d38799ad..e8db5738 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'; @@ -40,21 +41,24 @@ export default function usePaginatedResult( }); } + 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) {