Enable existing transaction fetching debouncing

web/src/hooks/useDebounce.ts

@@ -0,0 +1,17 @@
+import { useState, useEffect } from 'react';
+
+export function useDebounce<T>(value: T, delay: number = 500): T {
+  const [debouncedValue, setDebouncedValue] = useState<T>(value);
+
+  useEffect(() => {
+    const handler = setTimeout(() => {
+      setDebouncedValue(value);
+    }, delay);
+
+    return () => {
+      clearTimeout(handler);
+    };
+  }, [value, delay]);
+
+  return debouncedValue;
+}

web/src/pages/PrepareTransactionsPage/PrepareTransactionsPage.tsx

@@ -10,12 +10,14 @@ import { FilterPanel, type FilterData } from "./FilterPanel";
 import dayjs from "dayjs";
 import { ExistingTransactions } from "./ExistingTransactions";
 import classNames from "classnames";
+import { useDebounce } from "../../hooks/useDebounce";
 
 
 export default function PrepareTransactionsPage() {
   const { state, dispatch } = useStore();  
 
   const [userFilter, setUserFilter] = useState<FilterData>({});
+  const debouncedUserFilter = useDebounce(userFilter, 700);  
   const [deselected, setDeselected] = useState<number[]>([]);
   const [enabledExistingTransactions, setEnabledExistingTransactions] = useState(true);
   const [existingTransactions, setExistingTransactions] = useState<Transaction[]>([]);
@@ -73,21 +75,21 @@ export default function PrepareTransactionsPage() {
     if (!state.server || !enabledExistingTransactions) {
       setExistingTransactions([]);
       return;
-    }
+    }    
 
     // If no "from" filter active, pull the latest 10 transactions
-    if (!userFilter.from) {
+    if (!debouncedUserFilter.from) {
       const transactions = await getLatestTransactions(state.server, 10);
       setExistingTransactions(transactions);
       return;
     }
 
-    const start = userFilter.from.format("YYYY-MM-DD");
-    const end = (userFilter.to ?? dayjs()).format("YYYY-MM-DD");    
+    const start = debouncedUserFilter.from.format("YYYY-MM-DD");
+    const end = (debouncedUserFilter.to ?? dayjs()).format("YYYY-MM-DD");    
 
     const transactions = await getDateRangedTransactions(state.server, start, end);
     setExistingTransactions(transactions);
-  }, [enabledExistingTransactions, state.server, userFilter]);
+  }, [enabledExistingTransactions, state.server, debouncedUserFilter]);
 
 
   useEffect(() => {
@@ -96,7 +98,7 @@ export default function PrepareTransactionsPage() {
 
   useEffect(() => {    
     refreshExistingTransactions()
-  }, [enabledExistingTransactions, state.server, userFilter]);    
+  }, [enabledExistingTransactions, state.server, debouncedUserFilter]);    
 
   return (
     <div className="columns mt-6">