From 531fb12eabfc09cbcc7859343f07bf27f8d0f1ca Mon Sep 17 00:00:00 2001
From: Pouzor <remy.jardinet@gmail.com>
Date: Thu, 9 Apr 2026 16:52:43 +0200
Subject: [PATCH] fix: replace SVG animate with CSS animation for basic edge to
 prevent bounce

SVG <animate> restarts on every React re-render (especially visible under
StrictMode double-invoke in dev), causing a visible bounce. CSS animation
runs on the compositor thread independently of React renders.
---
 frontend/src/components/canvas/edges/index.tsx | 18 ++++++------------
 frontend/src/index.css                         |  5 +++++
 2 files changed, 11 insertions(+), 12 deletions(-)

diff --git a/frontend/src/components/canvas/edges/index.tsx b/frontend/src/components/canvas/edges/index.tsx
index 00f9424..fcb05ba 100644
--- a/frontend/src/components/canvas/edges/index.tsx
+++ b/frontend/src/components/canvas/edges/index.tsx
@@ -255,18 +255,12 @@ export function HomelableEdge({ id, source, target, sourceX, sourceY, targetX, t
           stroke={strokeColor}
           strokeWidth={style.strokeWidth as number ?? 2}
           strokeDasharray="5"
-          style={{ pointerEvents: 'none' }}
-        >
-          {/* Always animate physically downward: if source is above target the path
-              goes forward (source→target = down), otherwise reverse */}
-          <animate
-            attributeName="stroke-dashoffset"
-            from={sourceY <= targetY ? '10' : '0'}
-            to={sourceY <= targetY ? '0' : '10'}
-            dur="0.5s"
-            repeatCount="indefinite"
-          />
-        </path>
+          style={{
+            pointerEvents: 'none',
+            animation: 'homelable-basic-dash 0.5s linear infinite',
+            animationDirection: sourceY <= targetY ? 'normal' : 'reverse',
+          }}
+        />
       )}
 
       {animMode === 'snake' && (
diff --git a/frontend/src/index.css b/frontend/src/index.css
index f962a64..ea075ec 100644
--- a/frontend/src/index.css
+++ b/frontend/src/index.css
@@ -6,6 +6,11 @@
 
 @custom-variant dark (&:is(.dark *));
 
+@keyframes homelable-basic-dash {
+  from { stroke-dashoffset: 10; }
+  to   { stroke-dashoffset: 0; }
+}
+
 /* Homelable dark theme — always dark */
 :root {
     --background: #0d1117;