add delay for highlighing the address

blockscout · Dec 27, 2023 · 31c0bfb · 31c0bfb
1 parent fad7516
commit 31c0bfb
Showing 1 changed file with 13 additions and 2 deletions.
diff --git a/lib/contexts/addressHighlight.tsx b/lib/contexts/addressHighlight.tsx
@@ -14,15 +14,20 @@ export const AddressHighlightContext = React.createContext<TAddressHighlightCont
 
 export function AddressHighlightProvider({ children }: AddressHighlightProviderProps) {
   const [ highlightedAddress, setHighlightedAddress ] = React.useState<string | null>(null);
+  const timeoutId = React.useRef<number | null>(null);
 
   const onMouseEnter = React.useCallback((event: React.MouseEvent) => {
-    // TODO @tom2drum add throttling
     const hash = event.currentTarget.getAttribute('data-hash');
-    hash && setHighlightedAddress(hash);
+    if (hash) {
+      timeoutId.current = window.setTimeout(() => {
+        setHighlightedAddress(hash);
+      }, 100);
+    }
   }, []);
 
   const onMouseLeave = React.useCallback(() => {
     setHighlightedAddress(null);
+    typeof timeoutId.current === 'number' && window.clearTimeout(timeoutId.current);
   }, []);
 
   const value = React.useMemo(() => {
@@ -33,6 +38,12 @@ export function AddressHighlightProvider({ children }: AddressHighlightProviderP
     };
   }, [ highlightedAddress, onMouseEnter, onMouseLeave ]);
 
+  React.useEffect(() => {
+    return () => {
+      typeof timeoutId.current === 'number' && window.clearTimeout(timeoutId.current);
+    };
+  }, []);
+
   return (
     <AddressHighlightContext.Provider value={ value }>
       { children }