fix: improve hover interaction timeout handling in RenderNode and useHoverInteractions for render perfomance

Author: genwolff

src/react-obj-view/components/RenderNode.tsx

@@ -50,26 +50,33 @@ export const RenderNode: React.FC<ObjectViewRenderRowProps> = (props) => {
         [_options, isSearchMatch]
     )
 
-    const actionActiveTimeoutRef = useRef<any>(undefined)
     const [actionActive, setActionActive] = useState(false)
-
+    const actionActiveRef = useRef({ timeout: undefined as any, active: actionActive })
+    actionActiveRef.current.active = actionActive;
+    
     const onMouseEnter = useCallback(
         () => {
             options.onMouseEnter(renderIndex)
-            clearTimeout(actionActiveTimeoutRef.current);
-            actionActiveTimeoutRef.current = setTimeout(() => setActionActive(true), 40)
-            // console.log("Enter", renderIndex)
+            clearTimeout(actionActiveRef.current.timeout);
+            actionActiveRef.current.timeout = setTimeout(
+                () => {
+                    setActionActive(true)
+
+                },
+                50
+            )
         },
         [options.onMouseEnter, renderIndex]
     )
 
     const onMouseLeave = useCallback(
         () => {
             options.onMouseLeave(renderIndex)
-            clearTimeout(actionActiveTimeoutRef.current);
-            setActionActive(false);
-            // console.log("Leave", renderIndex)
-
+            clearTimeout(actionActiveRef.current.timeout);
+            actionActiveRef.current.timeout = setTimeout(
+                () => actionActiveRef.current.active && setActionActive(false),
+                50
+            )
         },
         [options.onMouseLeave, renderIndex]
     )

src/react-obj-view/hooks/useHoverInteractions.tsx

@@ -16,26 +16,31 @@ export function useHoverInteractions(
 
     const onMouseEnter = useCallback(
         (index: number) => {
-            const { getNodeByIndex, childCount } = ref.current
-            let containerStyles = containerRef?.current?.style;
-            if (index < childCount && containerStyles) {
-                let node = getNodeByIndex(index)
-                if (!node) return;
-                let parentIndex = node.childCount > 1
-                    ? node.parentIndex.at(-1)
-                    : node.parentIndex.at(-2)
-                    ?? 0
-                // console.log({ parentIndex })
-                containerStyles.setProperty('--active-index', String(index));
-                containerStyles.setProperty('--active-parent', String(parentIndex));
-            }
+
+            clearTimeout(ref.current.timeout);
+
+            ref.current.timeout = setTimeout(() => {
+
+                const { getNodeByIndex, childCount } = ref.current
+                let containerStyles = containerRef?.current?.style;
+                if (index < childCount && containerStyles) {
+                    let node = getNodeByIndex(index)
+                    if (!node) return;
+                    let parentIndex = node.childCount > 1
+                        ? node.parentIndex.at(-1)
+                        : node.parentIndex.at(-2)
+                        ?? 0
+                    containerStyles.setProperty('--active-index', String(index));
+                    containerStyles.setProperty('--active-parent', String(parentIndex));
+                }
+            }, 50);
+
         },
         [containerRef, ref]
     );
 
     const onMouseLeave = useCallback(
         (index: number) => {
-            
             clearTimeout(ref.current.timeout);
 
             ref.current.timeout = setTimeout(() => {
@@ -51,7 +56,7 @@ export function useHoverInteractions(
                     }
 
                 }
-            }, 25);
+            }, 100);
         },
         [containerRef, ref]
     );