diff --git a/lib/contexts/addressHighlight.tsx b/lib/contexts/addressHighlight.tsx index 55b39dd682..f4bb79e8ff 100644 --- a/lib/contexts/addressHighlight.tsx +++ b/lib/contexts/addressHighlight.tsx @@ -14,15 +14,20 @@ export const AddressHighlightContext = React.createContext(null); + const timeoutId = React.useRef(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 ( { children }