Debounce the useTransactionsSearch search method

actualbudget · Oct 17, 2024 · d98e133 · d98e133
1 parent 0c4900d
commit d98e133
Show file tree

Hide file tree

Showing 3 changed files with 8 additions and 11 deletions.
diff --git a/packages/desktop-client/src/components/mobile/accounts/AccountTransactions.tsx b/packages/desktop-client/src/components/mobile/accounts/AccountTransactions.tsx
@@ -7,8 +7,6 @@ import React, {
 } from 'react';
 import { useDispatch, useSelector } from 'react-redux';
 
-import { useDebounceCallback } from 'usehooks-ts';
-
 import {
   collapseModals,
   getPayees,
@@ -276,14 +274,12 @@ function TransactionListWithPreviews({
     });
   }, [dispatch, reloadTransactions]);
 
-  const { isSearching, search } = useTransactionsSearch({
+  const { isSearching, search: onSearch } = useTransactionsSearch({
     updateQuery: setTransactionsQuery,
     resetQuery: () => setTransactionsQuery(baseTransactionsQuery()),
     dateFormat,
   });
 
-  const onSearch = useDebounceCallback(search, 150);
-
   const onOpenTransaction = useCallback(
     (transaction: TransactionEntity) => {
       if (!isPreviewId(transaction.id)) {

diff --git a/packages/desktop-client/src/components/mobile/budget/CategoryTransactions.jsx b/packages/desktop-client/src/components/mobile/budget/CategoryTransactions.jsx
@@ -1,8 +1,6 @@
 import React, { useCallback, useEffect, useState } from 'react';
 import { useDispatch } from 'react-redux';
 
-import { useDebounceCallback } from 'usehooks-ts';
-
 import { getPayees } from 'loot-core/client/actions';
 import {
   useTransactions,
@@ -68,12 +66,11 @@ export function CategoryTransactions({ category, month }) {
     });
   }, [dispatch, reloadTransactions]);
 
-  const { search } = useTransactionsSearch({
+  const { search: onSearch } = useTransactionsSearch({
     updateQuery: setTransactionsQuery,
     resetQuery: () => setTransactionsQuery(baseTransactionsQuery()),
     dateFormat,
   });
-  const onSearch = useDebounceCallback(search, 150);
 
   const onOpenTransaction = useCallback(
     transaction => {

diff --git a/packages/loot-core/src/client/data-hooks/transactions.ts b/packages/loot-core/src/client/data-hooks/transactions.ts
@@ -1,5 +1,7 @@
 import { useEffect, useRef, useState, useMemo, useCallback } from 'react';
 
+import debounce from 'lodash/debounce';
+
 import { send } from '../../platform/client/fetch';
 import { type Query } from '../../shared/query';
 import { ungroupTransactions } from '../../shared/transactions';
@@ -178,6 +180,7 @@ type UseTransactionsSearchProps = {
   updateQuery: (updateFn: (searchQuery: Query) => Query) => void;
   resetQuery: () => void;
   dateFormat: string;
+  delayMs?: number;
 };
 
 type UseTransactionsSearchResult = {
@@ -189,11 +192,12 @@ export function useTransactionsSearch({
   updateQuery,
   resetQuery,
   dateFormat,
+  delayMs = 150,
 }: UseTransactionsSearchProps): UseTransactionsSearchResult {
   const [isSearching, setIsSearching] = useState(false);
 
   const updateSearchQuery = useCallback(
-    (searchText: string) => {
+    debounce((searchText: string) => {
       if (searchText === '') {
         resetQuery();
         setIsSearching(false);
@@ -203,7 +207,7 @@ export function useTransactionsSearch({
         );
         setIsSearching(true);
       }
-    },
+    }, delayMs),
     [dateFormat, resetQuery, updateQuery],
   );