From 92fdba7eef24275d926366ff4550a29fcf03b3e9 Mon Sep 17 00:00:00 2001
From: dtoro <d.toro.v@pm.me>
Date: Thu, 12 Mar 2026 20:45:40 +0100
Subject: [PATCH] fix: edge animation

---
 .../src/app/canvas/useCanvasConnectionPath.ts | 19 +++++--------------
 frontend/src/styles.css                       |  4 ++--
 2 files changed, 7 insertions(+), 16 deletions(-)

diff --git a/frontend/src/app/canvas/useCanvasConnectionPath.ts b/frontend/src/app/canvas/useCanvasConnectionPath.ts
index 6d0e4d5..9e8cb8b 100644
--- a/frontend/src/app/canvas/useCanvasConnectionPath.ts
+++ b/frontend/src/app/canvas/useCanvasConnectionPath.ts
@@ -14,8 +14,8 @@ function setToStableKey(s: Set<string>): string {
 
 export type EdgeLike = { source: string; target: string }
 
-/** Minimum time (ms) the connection ant trail runs when a path update is in progress. */
-const CONNECTION_PATH_UPDATE_MIN_MS = 1500
+/** Short tail (ms) after last updating node ends so the path doesn't vanish instantly. */
+const CONNECTION_PATH_UPDATE_TAIL_MS = 200
 
 export type UseCanvasConnectionPathResult = {
   connectionPathUpdatingNodeIds: string[]
@@ -41,7 +41,6 @@ export function useCanvasConnectionPath(edges: EdgeLike[]): UseCanvasConnectionP
   const [connectionPathErrorNodeIds, setConnectionPathErrorNodeIds] = useState<string[]>([])
 
   const pathUpdateNodeIdsRef = useRef<Set<string>>(new Set())
-  const pathUpdateStartTimeRef = useRef<number | null>(null)
   const pathUpdateEndTimeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null)
   const connectionPathPausedNodeIdsRef = useRef<string[]>([])
   connectionPathPausedNodeIdsRef.current = connectionPathPausedNodeIds
@@ -61,7 +60,6 @@ export function useCanvasConnectionPath(edges: EdgeLike[]): UseCanvasConnectionP
     const ref = pathUpdateNodeIdsRef.current
     ref.add(nodeId)
     if (ref.size === 1) {
-      pathUpdateStartTimeRef.current = Date.now()
       if (pathUpdateEndTimeoutRef.current != null) {
         clearTimeout(pathUpdateEndTimeoutRef.current)
         pathUpdateEndTimeoutRef.current = null
@@ -77,17 +75,10 @@ export function useCanvasConnectionPath(edges: EdgeLike[]): UseCanvasConnectionP
       setConnectionPathUpdatingNodeIds(Array.from(ref))
       return
     }
-    const startedAt = pathUpdateStartTimeRef.current ?? 0
-    const elapsed = Date.now() - startedAt
-    const remaining = Math.max(0, CONNECTION_PATH_UPDATE_MIN_MS - elapsed)
-    if (remaining === 0) {
+    pathUpdateEndTimeoutRef.current = setTimeout(() => {
+      pathUpdateEndTimeoutRef.current = null
       clearPathUpdateSession()
-    } else {
-      pathUpdateEndTimeoutRef.current = setTimeout(() => {
-        pathUpdateEndTimeoutRef.current = null
-        clearPathUpdateSession()
-      }, remaining)
-    }
+    }, CONNECTION_PATH_UPDATE_TAIL_MS)
   }, [clearPathUpdateSession])
 
   const addConnectionPathTrigger = useCallback((nodeId: string) => {
diff --git a/frontend/src/styles.css b/frontend/src/styles.css
index 4c287f7..d2a0fa1 100644
--- a/frontend/src/styles.css
+++ b/frontend/src/styles.css
@@ -143,11 +143,11 @@ body {
     fill: none;
     stroke-dasharray: 8 6;
     stroke-dashoffset: 0;
-    animation: edge-flow 1.2s linear infinite;
+    animation: edge-flow 0.5s linear infinite;
     will-change: stroke-dashoffset;
     transform: translateZ(0);
     backface-visibility: hidden;
-    transition: stroke 0.4s ease-out;
+    transition: stroke 0.2s ease-out;
 }
 
 .react-flow__edge path.animated-edge-path.animated-edge-path--updating,