diff --git a/.changeset/cyan-vans-attend.md b/.changeset/cyan-vans-attend.md
new file mode 100644
index 00000000..9b74f62f
--- /dev/null
+++ b/.changeset/cyan-vans-attend.md
@@ -0,0 +1,5 @@
+---
+"@vue-flow/core": patch
+---
+
+Hide viewport until initial fit view is finished
diff --git a/packages/core/src/container/Viewport/Transform.vue b/packages/core/src/container/Viewport/Transform.vue
index 9edf061f..d856cf33 100644
--- a/packages/core/src/container/Viewport/Transform.vue
+++ b/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
-    class="vue-flow__transformationpane vue-flow__container"
-    :style="{ transform: `translate(${viewport.x}px,${viewport.y}px) scale(${viewport.zoom})` }"
-  >
+  <div class="vue-flow__transformationpane vue-flow__container" :style="{ transform, opacity: isHidden ? 0 : undefined }">
     <slot />
   </div>
 </template>
diff --git a/packages/core/src/store/actions.ts b/packages/core/src/store/actions.ts
index 0c345b5b..44554125 100644
--- a/packages/core/src/store/actions.ts
+++ b/packages/core/src/store/actions.ts
@@ -173,8 +173,9 @@ export function useActions(
     }
 
     if (!state.fitViewOnInitDone && state.fitViewOnInit) {
-      viewportHelper.value.fitView()
-      state.fitViewOnInitDone = true
+      viewportHelper.value.fitView().then(() => {
+        state.fitViewOnInitDone = true
+      })
     }
 
     if (changes.length) {