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,47 +144,33 @@ onMounted(() => {
     @move="onDrag"
     @stop="onDragStop"
   >
-    <div
-      ref="node-element"
-      :class="[
-        'vue-flow__node',
-        `vue-flow__node-${props.node.type}`,
-        {
-          selected: props.selected,
-          selectable: selectable,
-        },
-        props.node.class,
-      ]"
-      :style="{
-        zIndex: props.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: props.selected,
-          connectable,
-          sourcePosition: props.node.sourcePosition,
-          targetPosition: props.node.targetPosition,
-          dragging: props.node.__rf?.isDragging,
+    <Suspense>
+      <div
+        ref="node-element"
+        :class="[
+          'vue-flow__node',
+          `vue-flow__node-${props.node.type}`,
+          {
+            selected: props.selected,
+            selectable: selectable,
+          },
+          props.node.class,
+        ]"
+        :style="{
+          zIndex: props.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"
       >
-        <component
-          :is="props.type"
+        <slot
           v-bind="{
             id: props.node.id,
             data: props.node.data,
@@ -197,8 +183,24 @@ onMounted(() => {
             targetPosition: props.node.targetPosition,
             dragging: props.node.__rf?.isDragging,
           }"
-        />
-      </slot>
-    </div>
+        >
+          <component
+            :is="props.type"
+            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: props.selected,
+              connectable,
+              sourcePosition: props.node.sourcePosition,
+              targetPosition: props.node.targetPosition,
+              dragging: props.node.__rf?.isDragging,
+            }"
+          />
+        </slot>
+      </div>
+    </Suspense>
   </DraggableCore>
 </template>