From 294133315cefd3ff02bed10705f1e929b4e01297 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=D0=A0=D0=B0=D1=81=D1=83=D0=BB?=
 <rasul.sahibjanli@gmail.com>
Date: Mon, 5 Aug 2024 19:12:06 +0300
Subject: [PATCH] feat: added delay for node hover

---
 src/components/Universe/Graph/Cubes/index.tsx | 16 ++++++++++++++--
 1 file changed, 14 insertions(+), 2 deletions(-)

diff --git a/src/components/Universe/Graph/Cubes/index.tsx b/src/components/Universe/Graph/Cubes/index.tsx
index d97dddadf..c36d379c5 100644
--- a/src/components/Universe/Graph/Cubes/index.tsx
+++ b/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)
         }
       }
     },