Merge pull request #1997 from stakwork/feature/delay-for-node-hover

feat: added delay for node hover

src/components/Universe/Graph/Cubes/index.tsx

@@ -1,6 +1,6 @@
 import { Select } from '@react-three/drei'
 import { ThreeEvent } from '@react-three/fiber'
-import { memo, useCallback } from 'react'
+import { memo, useCallback, useRef } from 'react'
 import { Object3D } from 'three'
 import { useAppStore } from '~/stores/useAppStore'
 import { useDataStore } from '~/stores/useDataStore'
@@ -12,6 +12,8 @@ import { RelevanceBadges } from './RelevanceBadges'
 import { SelectionDataNodes } from './SelectionDataNodes'
 import { TextNode } from './Text'
 
+const POINTER_IN_DELAY = 200
+
 export const Cubes = memo(() => {
   const selectedNode = useSelectedNode()
   const relativeIds = useSelectedNodeRelativeIds()
@@ -49,10 +51,17 @@ export const Cubes = memo(() => {
     [setTranscriptOpen, ignoreNodeEvent],
   )
 
+  const hoverTimeoutRef = useRef<NodeJS.Timeout | null>(null)
+
   const onPointerOut = useCallback(
     (e: ThreeEvent<PointerEvent>) => {
       e.stopPropagation()
 
+      if (hoverTimeoutRef.current) {
+        clearTimeout(hoverTimeoutRef.current)
+        hoverTimeoutRef.current = null
+      }
+
       setHoveredNode(null)
     },
     [setHoveredNode],
@@ -68,7 +77,10 @@ export const Cubes = memo(() => {
 
         if (!ignoreNodeEvent(node)) {
           e.stopPropagation()
-          setHoveredNode(node)
+
+          hoverTimeoutRef.current = setTimeout(() => {
+            setHoveredNode(node)
+          }, POINTER_IN_DELAY)
         }
       }
     },