performance

src/App.tsx

@@ -8,6 +8,8 @@ import {
   addEdge,
   applyNodeChanges,
   applyEdgeChanges,
+  useNodesInitialized,
+  useReactFlow,
   type Node,
   type Edge,
   type Connection,
@@ -107,6 +109,18 @@ const PROJECT_VERSION = 1
 
 export type ProjectMessage = { type: 'success' | 'error'; text: string }
 
+/** Calls fitView when nodes are initialized (e.g. after load/import). Must be rendered inside ReactFlowProvider. */
+function FlowFitViewOnLoad() {
+  const nodesInitialized = useNodesInitialized()
+  const { fitView } = useReactFlow()
+  React.useEffect(() => {
+    if (nodesInitialized) {
+      fitView?.({ duration: 200 })
+    }
+  }, [nodesInitialized, fitView])
+  return null
+}
+
 export default function App() {
   const { theme } = useTheme()
   const {
@@ -488,6 +502,7 @@ export default function App() {
                     </div>
                   )}
                   <ReactFlowProvider initialNodes={nodes} initialEdges={edges} fitView>
+                    <FlowFitViewOnLoad />
                     <ReactFlow
                       nodes={nodes}
                       edges={edges}
@@ -508,6 +523,9 @@ export default function App() {
                       fitView
                       onInit={onInit}
                       nodeDragThreshold={1}
+                      nodesDraggable
+                      nodesConnectable
+                      elementsSelectable
                     >
                       <Background variant="dots" gap={20} />
                       <Controls />