fix issue wavetermdev#1625

Author: ZLATAN628

frontend/layout/lib/layoutModelHooks.ts

@@ -11,22 +11,18 @@ import { LayoutModel } from "./layoutModel";
 import { LayoutNode, NodeModel, TileLayoutContents } from "./types";
 
 const layoutModelMap: Map<string, LayoutModel> = new Map();
+const timeoutMap: Map<string, NodeJS.Timeout | null> = new Map();
 
 export function getLayoutModelForTab(tabAtom: Atom<Tab>): LayoutModel {
     const tabData = globalStore.get(tabAtom);
     if (!tabData) return;
     const tabId = tabData.oid;
-    if (layoutModelMap.has(tabId)) {
-        const layoutModel = layoutModelMap.get(tabData.oid);
-        if (layoutModel) {
-            return layoutModel;
-        }
-    }
-    const layoutTreeStateAtom = withLayoutTreeStateAtomFromTab(tabAtom);
-    const layoutModel = new LayoutModel(layoutTreeStateAtom, globalStore.get, globalStore.set);
-    globalStore.sub(layoutTreeStateAtom, () => fireAndForget(layoutModel.onTreeStateAtomUpdated.bind(layoutModel)));
-    layoutModelMap.set(tabId, layoutModel);
-    return layoutModel;
+    return computeIfAbsent(layoutModelMap, tabId, (_) => {
+        const layoutTreeStateAtom = withLayoutTreeStateAtomFromTab(tabAtom);
+        const layoutModel = new LayoutModel(layoutTreeStateAtom, globalStore.get, globalStore.set);
+        globalStore.sub(layoutTreeStateAtom, () => fireAndForget(layoutModel.onTreeStateAtomUpdated.bind(layoutModel)));
+        return layoutModel;
+    })
 }
 
 export function getLayoutModelForTabById(tabId: string) {
@@ -73,25 +69,26 @@ export function useDebouncedNodeInnerRect(nodeModel: NodeModel): CSSProperties {
     const isResizing = useAtomValue(nodeModel.isResizing);
     const prefersReducedMotion = useAtomValue(atoms.prefersReducedMotionAtom);
     const [innerRect, setInnerRect] = useState<CSSProperties>();
-    const [innerRectDebounceTimeout, setInnerRectDebounceTimeout] = useState<NodeJS.Timeout>();
 
     const setInnerRectDebounced = useCallback(
         (nodeInnerRect: CSSProperties) => {
             clearInnerRectDebounce();
-            setInnerRectDebounceTimeout(
-                setTimeout(() => {
-                    setInnerRect(nodeInnerRect);
-                }, animationTimeS * 1000)
-            );
+            const timeout = setTimeout(() => {
+                setInnerRect(nodeInnerRect);
+            }, animationTimeS * 1000);
+            computeIfAbsent(timeoutMap, 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) {
@@ -104,3 +101,11 @@ export function useDebouncedNodeInnerRect(nodeModel: NodeModel): CSSProperties {
 
     return innerRect;
 }
+
+function computeIfAbsent<V, F>(map: Map<V, F>, key: V, mappingFunction: (a: V) => F): F {
+    if (!map.has(key)) {
+        const newValue = mappingFunction(key);
+        map.set(key, newValue);
+    }
+    return map.get(key);
+}