diff --git a/package/src/composables/useZoomPanHelper.ts b/package/src/composables/useZoomPanHelper.ts
index eece81ac..e2d0c2e6 100644
--- a/package/src/composables/useZoomPanHelper.ts
+++ b/package/src/composables/useZoomPanHelper.ts
@@ -8,7 +8,7 @@ const DEFAULT_PADDING = 0.1
 
 const transition = (selection: D3Selection, ms = 0) => selection.transition().duration(ms)
 
-export const untilDimensions = async (store: Store) => {
+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) {
diff --git a/package/src/container/Viewport/Transform.vue b/package/src/container/Viewport/Transform.vue
index a6adc184..969e2a3f 100644
--- a/package/src/container/Viewport/Transform.vue
+++ b/package/src/container/Viewport/Transform.vue
@@ -1,12 +1,23 @@
 <script lang="ts" setup>
 import NodeRenderer from '../NodeRenderer/NodeRenderer.vue'
 import EdgeRenderer from '../EdgeRenderer/EdgeRenderer.vue'
-import { useVueFlow, useZoomPanHelper, untilDimensions } 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()
 
+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)
+  }
+
+  return true
+}
+
 const ready = ref(false)
 onMounted(async () => {
   const { zoomIn, zoomOut, zoomTo, setTransform, getTransform, fitView, fitBounds, setCenter } = useZoomPanHelper(store)