fix(core): hide graph until initial fitview is done (#1459)

* fix(core): hide graph until initial fitview is done

* chore(changeset): add

* fix(core): wait for fit view to finish

.changeset/cyan-vans-attend.md

@@ -0,0 +1,5 @@
+---
+"@vue-flow/core": patch
+---
+
+Hide viewport until initial fit view is finished

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

@@ -1,7 +1,18 @@
 <script lang="ts" setup>
+import { computed } from 'vue'
 import { useVueFlow } from '../../composables'
 
-const { viewport } = useVueFlow()
+const { viewport, fitViewOnInit, fitViewOnInitDone } = useVueFlow()
+
+const isHidden = computed(() => {
+  if (fitViewOnInit.value) {
+    return !fitViewOnInitDone.value
+  }
+
+  return false
+})
+
+const transform = computed(() => `translate(${viewport.value.x}px,${viewport.value.y}px) scale(${viewport.value.zoom})`)
 </script>
 
 <script lang="ts">
@@ -12,10 +23,7 @@ export default {
 </script>
 
 <template>
-  <div
+  <div class="vue-flow__transformationpane vue-flow__container" :style="{ transform, opacity: isHidden ? 0 : undefined }">
-    class="vue-flow__transformationpane vue-flow__container"
-    :style="{ transform: `translate(${viewport.x}px,${viewport.y}px) scale(${viewport.zoom})` }"
-  >
     <slot />
   </div>
 </template>

packages/core/src/store/actions.ts

@@ -173,8 +173,9 @@ export function useActions(
     }
 
     if (!state.fitViewOnInitDone && state.fitViewOnInit) {
-      viewportHelper.value.fitView()
+      viewportHelper.value.fitView().then(() => {
-      state.fitViewOnInitDone = true
+        state.fitViewOnInitDone = true
+      })
     }
 
     if (changes.length) {