From b44bceb142e1d511a0cfcbc08146f2a651e0c0ba Mon Sep 17 00:00:00 2001
From: Charles Howard <96023061+charlesrhoward@users.noreply.github.com>
Date: Sat, 21 Feb 2026 16:20:37 -0500
Subject: [PATCH] perf: conditionally mount smart connector layer

---
 components/editor/canvas.tsx | 24 +++++++++++++++---------
 1 file changed, 15 insertions(+), 9 deletions(-)

diff --git a/components/editor/canvas.tsx b/components/editor/canvas.tsx
index 32b5e53..808f0bf 100644
--- a/components/editor/canvas.tsx
+++ b/components/editor/canvas.tsx
@@ -1,6 +1,7 @@
 "use client"
 
 import React from "react"
+import dynamic from "next/dynamic"
 import { useState, useRef, useEffect, useCallback } from "react"
 import { Toolbar } from "./toolbar"
 import { PropertiesPanel } from "./properties-panel"
@@ -24,7 +25,6 @@ import type {
   HandlePosition,
 } from "@/lib/types"
 import { useCanvasStore, useHasHydrated } from "@/lib/store"
-import { SmartConnectorLayer } from "./smart-connector-layer"
 import { autoHandlePositions } from "@/lib/connector-utils"
 // </CHANGE> Import ActionsMenu component
 import { ActionsMenu } from "./actions-menu"
@@ -35,6 +35,10 @@ import { toast } from "sonner"
 // Helper for ID generation
 const generateId = () => Math.random().toString(36).substr(2, 9)
 const CANVAS_DEBUG = process.env.NEXT_PUBLIC_CANVAS_DEBUG === "true"
+const SmartConnectorLayer = dynamic(
+  () => import("./smart-connector-layer").then((mod) => mod.SmartConnectorLayer),
+  { ssr: false },
+)
 
 const canvasDebugLog = (...args: unknown[]) => {
   if (!CANVAS_DEBUG) return
@@ -2173,14 +2177,16 @@ export function Canvas({ previewElements }: { previewElements?: PreviewState | n
             </svg>
           </div>
 
-          <SmartConnectorLayer
-            elements={elements}
-            connections={connections}
-            viewport={viewport}
-            selectedConnectionId={selectedConnectionId}
-            isDarkMode={resolvedTheme === "dark"}
-            onConnectionSelect={handleConnectionClick}
-          />
+          {connections.length > 0 && (
+            <SmartConnectorLayer
+              elements={elements}
+              connections={connections}
+              viewport={viewport}
+              selectedConnectionId={selectedConnectionId}
+              isDarkMode={resolvedTheme === "dark"}
+              onConnectionSelect={handleConnectionClick}
+            />
+          )}
         </div>
       </div>