refactor(nodes): no jumping nodes on start

src/components/Nodes/wrapNode.tsx

@@ -186,6 +186,7 @@ export default (NodeComponent: ComponentType<NodeComponentProps>) => {
     sourcePosition,
     targetPosition,
     isHidden,
+    isInitialized,
   }: WrapNodeProps) => {
     const updateNodeDimensions = useStoreActions((actions) => actions.updateNodeDimensions);
     const setSelectedElements = useStoreActions((actions) => actions.setSelectedElements);
@@ -282,6 +283,7 @@ export default (NodeComponent: ComponentType<NodeComponentProps>) => {
       zIndex: selected ? 10 : 3,
       transform: `translate(${xPos}px,${yPos}px)`,
       pointerEvents: isSelectable || isDraggable || onClick ? 'all' : 'none',
+      visibility: isInitialized ? 'visible' : 'hidden',
       ...style,
     };
 

src/container/NodeRenderer/index.tsx

@@ -37,6 +37,7 @@ function renderNode(
   const isDraggable = !!(node.draggable || (nodesDraggable && typeof node.draggable === 'undefined'));
   const isSelectable = !!(node.selectable || (elementsSelectable && typeof node.selectable === 'undefined'));
   const isConnectable = !!(node.connectable || (nodesConnectable && typeof node.connectable === 'undefined'));
+  const isInitialized = node.__rf.width !== null && node.__rf.height !== null;
 
   return (
     <NodeComponent
@@ -64,6 +65,7 @@ function renderNode(
       targetPosition={node.targetPosition}
       selectNodesOnDrag={props.selectNodesOnDrag}
       isHidden={node.isHidden}
+      isInitialized={isInitialized}
     />
   );
 }

src/style.css

@@ -117,7 +117,6 @@
 .react-flow__node-default.selectable,
 .react-flow__node-input.selectable,
 .react-flow__node-output.selectable {
-
   &.selected,
   &.selected:hover {
     box-shadow: 0 0 0 1px #333;

src/types/index.ts

@@ -171,6 +171,7 @@ export interface WrapNodeProps {
   sourcePosition?: Position;
   targetPosition?: Position;
   isHidden?: boolean;
+  isInitialized?: boolean;
 }
 
 export type FitViewParams = {