From ed2e5744fd5264600c0f6d2c1d42612f27c6f456 Mon Sep 17 00:00:00 2001
From: Braks <78412429+bcakmakoglu@users.noreply.github.com>
Date: Sat, 8 Jun 2024 17:09:41 +0200
Subject: [PATCH] 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                 |  5 +++++
 .../core/src/container/Viewport/Transform.vue  | 18 +++++++++++++-----
 packages/core/src/store/actions.ts             |  5 +++--
 3 files changed, 21 insertions(+), 7 deletions(-)
 create mode 100644 .changeset/cyan-vans-attend.md

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) {