refactor(core): cleanup node styles

Signed-off-by: braks <78412429+bcakmakoglu@users.noreply.github.com>

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"

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)
   })
 </script>
@@ -38,7 +33,7 @@ export default {
   <div
     :key="`transform-${id}`"
     class="vue-flow__transformationpane vue-flow__container"
-    :style="{ transform: `translate(${viewport.x}px,${viewport.y}px) scale(${viewport.zoom})`, opacity: isReady ? undefined : 0 }"
+    :style="{ transform: `translate(${viewport.x}px,${viewport.y}px) scale(${viewport.zoom})` }"
   >
     <EdgeRenderer />