add search filter debouncing (#1086)

Author: ciur

frontend/apps/ui/src/features/documentsList/hooks/useDocumentsListTable.ts

@@ -9,8 +9,11 @@ import {
   selectPanelPageSize,
   selectPanelSorting
 } from "@/features/ui/panelRegistry"
+import {useDebouncedValue} from "@mantine/hooks"
 import {useEffect} from "react"
 
+const DEBOUNCE_WAIT_TIME_MS = 600 // miliseconds
+
 export default function useDocumentsListTable() {
   const {panelId} = usePanel()
   const dispatch = useAppDispatch()
@@ -27,19 +30,25 @@ export default function useDocumentsListTable() {
   const [searchDocuments, {data, isLoading, isError, error}] =
     useSearchDocumentsMutation()
 
+  const [debouncedSearchTokens] = useDebouncedValue(
+    searchTokens,
+    DEBOUNCE_WAIT_TIME_MS,
+    {leading: true}
+  )
+
   // Trigger search when tokens change or pagination changes
   useEffect(() => {
     // Build search params from tokens
     const searchParams: SearchQueryParams = buildSearchQueryParams({
-      tokens: searchTokens,
+      tokens: debouncedSearchTokens,
       pageNumber,
       pageSize,
       sorting
     })
 
     // Execute search
     searchDocuments(searchParams)
-  }, [searchTokens, pageNumber, pageSize, sorting])
+  }, [debouncedSearchTokens, pageNumber, pageSize, sorting])
 
   // Update document_type_id when data changes
   useEffect(() => {