feat: Add suspensions to node, noderenderer and around zoom-pane

* bind zoompanhelper functions to zoom-pane slot

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

src/components/Nodes/Node.vue

@@ -144,6 +144,7 @@ onMounted(() => {
     @move="onDrag"
     @stop="onDragStop"
   >
+    <Suspense>
       <div
         ref="node-element"
         :class="[
@@ -200,5 +201,6 @@ onMounted(() => {
           />
         </slot>
       </div>
+    </Suspense>
   </DraggableCore>
 </template>

src/container/NodeRenderer/NodeRenderer.vue

@@ -48,6 +48,7 @@ const selected = (nodeId: string) => store.selectedElements?.some(({ id }) => id
 </script>
 <template>
   <div class="vue-flow__nodes" :style="{ transform }">
+    <Suspense>
       <template v-for="node of nodes" :key="node.id">
         <Node
           :node="node"
@@ -61,5 +62,6 @@ const selected = (nodeId: string) => store.selectedElements?.some(({ id }) => id
           </template>
         </Node>
       </template>
+    </Suspense>
   </div>
 </template>

src/container/VueFlow/VueFlow.vue

@@ -1,5 +1,6 @@
 <script lang="ts" setup>
 import { CSSProperties, onBeforeUnmount } from 'vue'
+import { invoke } from '@vueuse/core'
 import {
   ConnectionLineType,
   ConnectionMode,
@@ -131,7 +132,10 @@ watch(
   (val) => init(val),
   { flush: 'pre', deep: true },
 )
-init(props)
+invoke(async () => {
+  await until(props.elements).toMatch((y) => y.length > 0)
+  init(props)
+})
 
 const nodeTypes = computed(() => {
   let types = defaultNodeTypes
@@ -148,6 +152,7 @@ const edgeTypes = computed(() => {
 </script>
 <template>
   <div class="vue-flow">
+    <Suspense>
       <ZoomPane
         :selection-key-code="props.selectionKeyCode"
         :zoom-activation-key-code="props.zoomActivationKeyCode"
@@ -190,6 +195,7 @@ const edgeTypes = computed(() => {
           <slot name="zoom-pane" v-bind="zoomPaneProps"></slot>
         </template>
       </ZoomPane>
+    </Suspense>
     <slot v-bind="{ ...props, store, hooks }"></slot>
   </div>
 </template>

src/container/ZoomPane/ZoomPane.vue

@@ -212,7 +212,17 @@ watchOnce(
 <template>
   <Suspense>
     <div ref="zoomPane" class="vue-flow__renderer vue-flow__zoompane">
-      <slot v-bind="{ transform, dimensions: { width, height } }"></slot>
+      <slot
+        v-bind="{
+          transform,
+          dimensions: { width, height },
+          zoomIn,
+          zoomOut,
+          zoomTo,
+          setTransform,
+          fitView,
+        }"
+      ></slot>
     </div>
   </Suspense>
 </template>