diff --git a/packages/core/src/components/Nodes/NodeWrapper.vue b/packages/core/src/components/Nodes/NodeWrapper.vue index 5ac5c6c9..4d17c5bb 100644 --- a/packages/core/src/components/Nodes/NodeWrapper.vue +++ b/packages/core/src/components/Nodes/NodeWrapper.vue @@ -267,8 +267,8 @@ export default { class="vue-flow__node" :class="[ `vue-flow__node-${type === false ? 'default' : name}`, - noPanClassName, { + [noPanClassName]: draggable, dragging, selected: node.selected, selectable, @@ -279,6 +279,7 @@ export default { zIndex: node.computedPosition.z ?? zIndex, transform: `translate(${node.computedPosition.x}px,${node.computedPosition.y}px)`, pointerEvents: selectable || draggable ? 'all' : 'none', + visibility: node.initialized ? 'visible' : 'hidden', ...getStyle, }" :tabIndex="focusable ? 0 : undefined" diff --git a/packages/core/src/container/Viewport/Transform.vue b/packages/core/src/container/Viewport/Transform.vue index 7015b9c3..9aa753e4 100644 --- a/packages/core/src/container/Viewport/Transform.vue +++ b/packages/core/src/container/Viewport/Transform.vue @@ -4,8 +4,6 @@ import EdgeRenderer from '../EdgeRenderer/EdgeRenderer.vue' const { id, viewport, emits, d3Zoom, d3Selection, dimensions, ...rest } = useVueFlow() -let isReady = $ref(false) - until(() => d3Zoom.value && d3Selection.value && dimensions.value.width > 0 && dimensions.value.height > 0) .toBeTruthy() .then(() => { @@ -20,9 +18,6 @@ until(() => d3Zoom.value && d3Selection.value && dimensions.value.width > 0 && d dimensions, ...rest, }) - - // hide graph until nodes are ready, so we don't have jumping nodes - isReady = true }, 1) }) @@ -38,7 +33,7 @@ export default {