diff --git a/frontend/layout/lib/layoutModelHooks.ts b/frontend/layout/lib/layoutModelHooks.ts index 582957b50..e791dc65f 100644 --- a/frontend/layout/lib/layoutModelHooks.ts +++ b/frontend/layout/lib/layoutModelHooks.ts @@ -11,6 +11,7 @@ import { LayoutModel } from "./layoutModel"; import { LayoutNode, NodeModel, TileLayoutContents } from "./types"; const layoutModelMap: Map = new Map(); +const timeoutMap: Map = new Map(); export function getLayoutModelForTab(tabAtom: Atom): LayoutModel { const tabData = globalStore.get(tabAtom); @@ -73,25 +74,26 @@ export function useDebouncedNodeInnerRect(nodeModel: NodeModel): CSSProperties { const isResizing = useAtomValue(nodeModel.isResizing); const prefersReducedMotion = useAtomValue(atoms.prefersReducedMotionAtom); const [innerRect, setInnerRect] = useState(); - const [innerRectDebounceTimeout, setInnerRectDebounceTimeout] = useState(); const setInnerRectDebounced = useCallback( (nodeInnerRect: CSSProperties) => { clearInnerRectDebounce(); - setInnerRectDebounceTimeout( - setTimeout(() => { - setInnerRect(nodeInnerRect); - }, animationTimeS * 1000) - ); + const timeout = setTimeout(() => { + setInnerRect(nodeInnerRect); + }, animationTimeS * 1000); + timeoutMap.set(nodeModel.blockId, timeout); }, [animationTimeS] ); - const clearInnerRectDebounce = useCallback(() => { - if (innerRectDebounceTimeout) { - clearTimeout(innerRectDebounceTimeout); - setInnerRectDebounceTimeout(undefined); + const clearInnerRectDebounce = function () { + if (timeoutMap.has(nodeModel.blockId)) { + const innerRectDebounceTimeout = timeoutMap.get(nodeModel.blockId); + if (innerRectDebounceTimeout) { + clearTimeout(innerRectDebounceTimeout); + } + timeoutMap.delete(nodeModel.blockId); } - }, [innerRectDebounceTimeout]); + }; useEffect(() => { if (prefersReducedMotion || isMagnified || isResizing) {