fix(viewport): emit paneReady when dimensions are ready

* Wait for viewport & nodes to have their dimensions established before emitting paneReady
* Avoids getting 0 values for dimensions on paneReady

package/src/container/Viewport/Transform.vue

@@ -1,13 +1,34 @@
 <script lang="ts" setup>
 import NodeRenderer from '../NodeRenderer/NodeRenderer.vue'
 import EdgeRenderer from '../EdgeRenderer/EdgeRenderer.vue'
-import { useVueFlow, useZoomPanHelper } from '../../composables'
-import { FlowInstance } from '../../types'
+import { useVueFlow, useZoomPanHelper, useWindow } from '../../composables'
+import { FlowInstance, Store } from '../../types'
 import { onLoadGetEdges, onLoadGetElements, onLoadGetNodes, onLoadProject, onLoadToObject } from '../../utils'
 
 const { id, store } = useVueFlow()
 
-onMounted(() => {
+const untilDimensions = async (store: Store) => {
+  // if ssr we can't wait for dimensions, they'll never really exist
+  const window = useWindow()
+  if ('screen' in window) {
+    // wait until viewport dimensions has been established
+    await until(store.dimensions).toMatch(({ height, width }) => !isNaN(width) && width > 0 && !isNaN(height) && height > 0)
+
+    // if initial nodes are present, wait until the node dimensions have been established
+    if (store.getNodes.length > 0) {
+      await until(store.getNodes).toMatch(
+        (nodes) =>
+          !!nodes.filter(({ dimensions: { width, height } }) => !isNaN(width) && width > 0 && !isNaN(height) && height > 0)
+            .length,
+      )
+    }
+  }
+
+  return true
+}
+
+const ready = ref(false)
+onMounted(async () => {
   const { zoomIn, zoomOut, zoomTo, setTransform, getTransform, fitView, fitBounds, setCenter } = useZoomPanHelper(store)
   const instance: FlowInstance = {
     fitView: (params = { padding: 0.1 }) => fitView(params),
@@ -24,6 +45,10 @@ onMounted(() => {
     getEdges: onLoadGetEdges(store),
     toObject: onLoadToObject(store),
   }
+
+  await untilDimensions(store)
+
+  ready.value = true
   store.instance = instance
   store.fitViewOnInit && instance.fitView()
   store.hooks.paneReady.trigger(instance)
@@ -37,7 +62,11 @@ export default {
 }
 </script>
 <template>
-  <div :key="`transformation-pane-${id}`" class="vue-flow__transformationpane vue-flow__container" :style="{ transform }">
+  <div
+    :key="`transformation-pane-${id}`"
+    class="vue-flow__transformationpane vue-flow__container"
+    :style="{ transform, opacity: ready ? undefined : 0 }"
+  >
     <NodeRenderer :key="`node-renderer-${id}`" />
     <EdgeRenderer :key="`edge-renderer-${id}`" />
     <slot />