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/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),