refactor(core,viewport): suspens transformation pane

packages/core/src/container/Viewport/Transform.vue

@@ -5,11 +5,13 @@ import { useVueFlow } from '../../composables'
 import NodeRenderer from '../NodeRenderer/NodeRenderer.vue'
 import EdgeRenderer from '../EdgeRenderer/EdgeRenderer.vue'
 
-const { id, viewport, d3Zoom, d3Selection, dimensions } = useVueFlow()
+const { id, viewport, d3Zoom, d3Selection, dimensions, fitViewOnInitDone } = useVueFlow()
 
 const viewportReady = ref(!isClient)
 
-until(() => !!(d3Zoom.value && d3Selection.value && dimensions.value.width > 0 && dimensions.value.height > 0))
+await until(() => !!(d3Zoom.value && d3Selection.value && dimensions.value.width > 0 && dimensions.value.height > 0)).toBe(true)
+
+until(fitViewOnInitDone)
   .toBe(true)
   .then(() => {
     setTimeout(() => {

packages/core/src/container/Viewport/Viewport.vue

@@ -402,9 +402,11 @@ export default {
       :is-selecting="isSelecting"
       :class="{ connecting: !!connectionStartHandle, dragging: paneDragging, draggable: shouldPanOnDrag }"
     >
-      <Transform>
-        <slot />
-      </Transform>
+      <Suspense>
+        <Transform>
+          <slot />
+        </Transform>
+      </Suspense>
     </Pane>
   </div>
 </template>