fix: suspension not working properly

* move invoke to vueflow to suspend
* await dimensions in Node/Edge-wrapper components
* await nodes/edges in renderer
* await elements in VueFlow

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

src/components/Edges/Edge.vue

@@ -1,9 +1,9 @@
 <script lang="ts" setup>
 import { useHandle, useStore } from '../../composables'
 import { ConnectionMode, Edge, EdgePositions, Position } from '../../types'
+import { getEdgePositions, getHandle, getSourceTargetNodes, isEdgeVisible } from '../../container/EdgeRenderer/utils'
+import { isEdge } from '../../utils'
 import EdgeAnchor from './EdgeAnchor.vue'
-import { getEdgePositions, getHandle, getSourceTargetNodes, isEdgeVisible } from '~/container/EdgeRenderer/utils'
-import { isEdge } from '~/utils'
 
 interface EdgeProps {
   edge: Edge

src/components/Nodes/Node.vue

@@ -148,33 +148,48 @@ onMounted(() => {
     @move="onDrag"
     @stop="onDragStop"
   >
-    <Suspense>
-      <div
-        ref="node-element"
-        :class="[
-          'vue-flow__node',
-          `vue-flow__node-${props.node.type}`,
-          {
-            selected,
-            selectable: selectable,
-          },
-          props.node.class,
-        ]"
-        :style="{
-          zIndex: selected ? 10 : 3,
-          transform: `translate(${props.node.__rf?.position?.x}px,${props.node.__rf?.position?.y}px)`,
-          pointerEvents: selectable || draggable ? 'all' : 'none',
-          opacity: props.node.__rf?.width !== null && props.node.__rf?.height !== null ? 1 : 0,
-          ...props.node.style,
+    <div
+      ref="node-element"
+      :class="[
+        'vue-flow__node',
+        `vue-flow__node-${props.node.type}`,
+        {
+          selected,
+          selectable: selectable,
+        },
+        props.node.class,
+      ]"
+      :style="{
+        zIndex: selected ? 10 : 3,
+        transform: `translate(${props.node.__rf?.position?.x}px,${props.node.__rf?.position?.y}px)`,
+        pointerEvents: selectable || draggable ? 'all' : 'none',
+        opacity: props.node.__rf?.width !== null && props.node.__rf?.height !== null ? 1 : 0,
+        ...props.node.style,
+      }"
+      :data-id="props.node.id"
+      @mouseenter="onMouseEnterHandler"
+      @mousemove="onMouseMoveHandler"
+      @mouseleave="onMouseLeaveHandler"
+      @contextmenu="onContextMenuHandler"
+      @click="onSelectNodeHandler"
+    >
+      <slot
+        v-bind="{
+          id: props.node.id,
+          data: props.node.data,
+          type: props.node.type,
+          xPos: props.node.__rf?.position?.x,
+          yPos: props.node.__rf?.position?.y,
+          selected,
+          connectable,
+          sourcePosition: props.node.sourcePosition,
+          targetPosition: props.node.targetPosition,
+          dragging: props.node.__rf?.isDragging,
         }"
-        :data-id="props.node.id"
-        @mouseenter="onMouseEnterHandler"
-        @mousemove="onMouseMoveHandler"
-        @mouseleave="onMouseLeaveHandler"
-        @contextmenu="onContextMenuHandler"
-        @click="onSelectNodeHandler"
       >
-        <slot
+        <component
+          :is="type"
+          v-if="typeof type !== 'boolean'"
           v-bind="{
             id: props.node.id,
             data: props.node.data,
@@ -187,25 +202,8 @@ onMounted(() => {
             targetPosition: props.node.targetPosition,
             dragging: props.node.__rf?.isDragging,
           }"
-        >
-          <component
-            :is="type"
-            v-if="typeof type !== 'boolean'"
-            v-bind="{
-              id: props.node.id,
-              data: props.node.data,
-              type: props.node.type,
-              xPos: props.node.__rf?.position?.x,
-              yPos: props.node.__rf?.position?.y,
-              selected,
-              connectable,
-              sourcePosition: props.node.sourcePosition,
-              targetPosition: props.node.targetPosition,
-              dragging: props.node.__rf?.isDragging,
-            }"
-          />
-        </slot>
-      </div>
-    </Suspense>
+        />
+      </slot>
+    </div>
   </DraggableCore>
 </template>

src/container/EdgeRenderer/EdgeRenderer.vue

@@ -1,6 +1,7 @@
 <script lang="ts" setup>
 import { CSSProperties } from 'vue'
-import { ConnectionLineType, Edge as TEdge } from '../../types'
+import { invoke } from '@vueuse/core'
+import { ConnectionLineType } from '../../types'
 import { useStore } from '../../composables'
 import Edge from '../../components/Edges/Edge.vue'
 import ConnectionLine from '../../components/ConnectionLine/ConnectionLine.vue'
@@ -22,6 +23,11 @@ const props = withDefaults(defineProps<EdgeRendererProps>(), {
 
 const store = useStore()
 
+invoke(async () => {
+  await until(store.getNodes).toMatch((y) => y && y.length > 0)
+  await until(store.transform).toMatch(([x, y, z]) => !isNaN(x) && x !== 0 && !isNaN(y) && y !== 0 && isNaN(z) && z !== 1)
+})
+
 const sourceNode = computed(() => store.nodes.find((n) => n.id === store.connectionNodeId))
 const connectionLineVisible = computed(
   () => !!(store.nodesConnectable && sourceNode.value && store.connectionNodeId && store.connectionHandleType),

src/container/NodeRenderer/NodeRenderer.vue

@@ -13,17 +13,16 @@ const props = withDefaults(defineProps<NodeRendererProps>(), {
 
 const store = useStore()
 
+invoke(async () => {
+  await until(store.getNodes).toMatch((y) => y && y.length > 0)
+  await until(store.transform).toMatch(([x, y, z]) => !isNaN(x) && x !== 0 && !isNaN(y) && y !== 0 && isNaN(z) && z !== 1)
+})
 const transform = computed(() => `translate(${store.transform[0]}px,${store.transform[1]}px) scale(${store.transform[2]})`)
 const snapGrid = computed(() => (store.snapToGrid ? store.snapGrid : undefined))
-
-invoke(async () => {
-  await until(store.getNodes).toMatch((y) => y.length > 0)
-  await until(store.transform).toMatch(([x, y, z]) => x !== 0 && y !== 0 && z !== 1)
-})
 </script>
 <template>
-  <div class="vue-flow__nodes" :style="{ transform }">
-    <Suspense>
+  <Suspense>
+    <div class="vue-flow__nodes" :style="{ transform }">
       <Node
         v-for="node of store.getNodes"
         :key="node.id"
@@ -35,6 +34,6 @@ invoke(async () => {
           <slot :name="`node-${node.type}`" v-bind="nodeProps"></slot>
         </template>
       </Node>
-    </Suspense>
-  </div>
+    </div>
+  </Suspense>
 </template>

src/container/VueFlow/VueFlow.vue

@@ -1,6 +1,7 @@
 <script lang="ts" setup>
 import { CSSProperties, onBeforeUnmount } from 'vue'
 import diff from 'microdiff'
+import { invoke } from '@vueuse/core'
 import {
   ConnectionLineType,
   ConnectionMode,
@@ -126,7 +127,7 @@ const init = (state: FlowState) => {
 }
 onBeforeUnmount(() => store?.$dispose())
 
-init(options)
+onMounted(() => init(options))
 watch(elements, (val) => store.setElements(val), { flush: 'post', deep: true })
 watch(
   () => store.elements,
@@ -146,6 +147,7 @@ watch(
   },
   { flush: 'pre', deep: true },
 )
+invoke(async () => await until(store.elements).toMatch((y) => y.length > 0))
 </script>
 <template>
   <div class="vue-flow">

src/container/ZoomPane/ZoomPane.vue

@@ -185,7 +185,6 @@ 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,