fix(core): hide transformation pane to avoid flickering of graph

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

packages/core/src/container/Viewport/Transform.vue

@@ -1,9 +1,12 @@
 <script lang="ts" setup>
+import { isClient } from '@vueuse/core'
 import NodeRenderer from '../NodeRenderer/NodeRenderer.vue'
 import EdgeRenderer from '../EdgeRenderer/EdgeRenderer.vue'
 
 const { id, viewport, emits, d3Zoom, d3Selection, dimensions, ...rest } = useVueFlow()
 
+const viewportReady = ref(!isClient)
+
 until(() => d3Zoom.value && d3Selection.value && dimensions.value.width > 0 && dimensions.value.height > 0)
   .toBeTruthy()
   .then(() => {
@@ -17,6 +20,10 @@ until(() => d3Zoom.value && d3Selection.value && dimensions.value.width > 0 && d
       dimensions,
       ...rest,
     })
+
+    setTimeout(() => {
+      viewportReady.value = true
+    }, 0)
   })
 </script>
 
@@ -31,7 +38,10 @@ 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})` }"
+    :style="{
+      transform: `translate(${viewport.x}px,${viewport.y}px) scale(${viewport.zoom})`,
+      opacity: viewportReady ? undefined : 0,
+    }"
   >
     <EdgeRenderer />