From 990126b2b9d8304d0386ae64529054ff374f9097 Mon Sep 17 00:00:00 2001
From: Braks <78412429+bcakmakoglu@users.noreply.github.com>
Date: Sat, 20 Nov 2021 01:19:36 +0100
Subject: [PATCH] fix: onLoad being triggered when elements aren't ready

Signed-off-by: Braks <78412429+bcakmakoglu@users.noreply.github.com>
---
 src/container/VueFlow/VueFlow.vue   | 40 ++++++++++++++---------------
 src/container/ZoomPane/ZoomPane.vue |  1 +
 2 files changed, 20 insertions(+), 21 deletions(-)

diff --git a/src/container/VueFlow/VueFlow.vue b/src/container/VueFlow/VueFlow.vue
index 483a5381..3abcab61 100644
--- a/src/container/VueFlow/VueFlow.vue
+++ b/src/container/VueFlow/VueFlow.vue
@@ -126,28 +126,26 @@ const init = (state: FlowState) => {
 }
 onBeforeUnmount(() => store?.$dispose())
 
-onMounted(() => {
-  init(options)
-  watch(elements, (val) => store.setElements(val), { flush: 'post', deep: true })
-  watch(
-    () => store.elements,
-    (val, oldVal) => {
-      nextTick(() => {
-        const hasDiff = diff(val, oldVal)
-        if (hasDiff.length > 0) elements.value = val
-      })
-    },
-    { flush: 'post', deep: true },
-  )
-  watch(
-    () => props,
-    (val, oldVal) => {
+init(options)
+watch(elements, (val) => store.setElements(val), { flush: 'post', deep: true })
+watch(
+  () => store.elements,
+  (val, oldVal) => {
+    nextTick(() => {
       const hasDiff = diff(val, oldVal)
-      if (hasDiff.length > 0) init({ ...store.$state, ...val } as FlowState)
-    },
-    { flush: 'pre', deep: true },
-  )
-})
+      if (hasDiff.length > 0) elements.value = val
+    })
+  },
+  { flush: 'post', deep: true },
+)
+watch(
+  () => props,
+  (val, oldVal) => {
+    const hasDiff = diff(val, oldVal)
+    if (hasDiff.length > 0) init({ ...store.$state, ...val } as FlowState)
+  },
+  { flush: 'pre', deep: true },
+)
 </script>
 <template>
   <div class="vue-flow">
diff --git a/src/container/ZoomPane/ZoomPane.vue b/src/container/ZoomPane/ZoomPane.vue
index 8a9d3206..06268b39 100644
--- a/src/container/ZoomPane/ZoomPane.vue
+++ b/src/container/ZoomPane/ZoomPane.vue
@@ -185,6 +185,7 @@ store.dimensions = {
 
 invoke(async () => {
   await until(() => !isNaN(width.value) && width.value > 0 && !isNaN(height.value) && height.value > 0).toBeTruthy()
+  await until(store.elements).toMatch((y) => y.length > 0)
   const instance: FlowInstance = {
     fitView: (params = { padding: 0.1 }) => fitView(params),
     zoomIn,