REF: use debounce in wallet transactions to avoid rapid reattempts

hooks/useDebounce.ts

@@ -1,23 +1,27 @@
-import { useState, useEffect } from 'react';
+import { useState, useEffect, useMemo } from 'react';
 import debounce from '../blue_modules/debounce';
 
-const useDebounce = <T>(value: T, delay: number): T => {
+// Overload signatures
+function useDebounce<T extends (...args: any[]) => any>(callback: T, delay: number): T;
+function useDebounce<T>(value: T, delay: number): T;
+
+function useDebounce<T>(value: T, delay: number): T {
+  const isFn = typeof value === 'function';
+
+  const debouncedFunction = useMemo(() => {
+    return isFn ? debounce(value as unknown as (...args: any[]) => any, delay) : null;
+  }, [isFn, value, delay]);
+
   const [debouncedValue, setDebouncedValue] = useState<T>(value);
 
   useEffect(() => {
-    const handler = debounce((val: T) => {
-      setDebouncedValue(val);
-    }, delay);
+    if (!isFn) {
+      const handler = setTimeout(() => setDebouncedValue(value), delay);
+      return () => clearTimeout(handler);
+    }
+  }, [isFn, value, delay]);
 
-    handler(value);
-    
-
-    return () => {
-      handler.cancel();
-    };
-  }, [value, delay]);
-
-  return debouncedValue;
-};
+  return isFn ? (debouncedFunction as unknown as T) : debouncedValue;
+}
 
 export default useDebounce;

screen/wallets/ManageWallets.tsx

@@ -17,13 +17,13 @@ import { useTheme } from '../../components/themes';
 import { useExtendedNavigation } from '../../hooks/useExtendedNavigation';
 import loc from '../../loc';
 import { useStorage } from '../../hooks/context/useStorage';
-import useDebounce from '../../hooks/useDebounce';
 import { TTXMetadata } from '../../class';
 import { ExtendedTransaction, LightningTransaction, Transaction, TWallet } from '../../class/wallets/types';
 import useBounceAnimation from '../../hooks/useBounceAnimation';
 import HeaderRightButton from '../../components/HeaderRightButton';
 import { useSettings } from '../../hooks/context/useSettings';
 import DragList, { DragListRenderItemInfo } from 'react-native-draglist';
+import useDebounce from '../../hooks/useDebounce';
 
 const ManageWalletsListItem = lazy(() => import('../../components/ManageWalletsListItem'));
 

screen/wallets/WalletTransactions.tsx

@@ -47,6 +47,7 @@ import { getClipboardContent } from '../../blue_modules/clipboard';
 import HandOffComponent from '../../components/HandOffComponent';
 import { HandOffActivityType } from '../../components/types';
 import WalletGradient from '../../class/wallet-gradient';
+import useDebounce from '../../hooks/useDebounce';
 
 const buttonFontSize =
   PixelRatio.roundToNearestPixel(Dimensions.get('window').width / 26) > 22
@@ -159,17 +160,12 @@ const WalletTransactions: React.FC<WalletTransactionsProps> = ({ route }) => {
     }
   }, [wallet, isElectrumDisabled, isLoading, saveToDisk, pageSize]);
 
-  useFocusEffect(
-    useCallback(() => {
-      const task = InteractionManager.runAfterInteractions(() => {
-        if (wallet && wallet.getLastTxFetch() === 0) {
-          refreshTransactions();
-        }
-      });
-
-      return () => task.cancel();
-    }, [refreshTransactions, wallet]),
-  );
+  useEffect(() => {
+    if (wallet && wallet.getLastTxFetch() === 0 && !isLoading) {
+      const debouncedRefresh = useDebounce(refreshTransactions, 500);
+      debouncedRefresh();
+    }
+  }, [wallet, isLoading, refreshTransactions]);
 
   useEffect(() => {
     if (wallet) {