update(zoom): remove watcher and use until

* wait until height and width are set for zoom pane to trigger load hook

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

src/container/ZoomPane/ZoomPane.vue

@@ -55,6 +55,8 @@ const clampedZoom = clamp(props.defaultZoom, store.minZoom, store.maxZoom)
 const transform = ref({ x: clampedX, y: clampedY, zoom: clampedZoom })
 const d3Zoom = ref(zoom<HTMLDivElement, any>().scaleExtent([store.minZoom, store.maxZoom]).translateExtent(store.translateExtent))
 const d3Selection = ref()
+
+const { zoomIn, zoomOut, zoomTo, transform: setTransform, fitView } = useZoomPanHelper()
 store.transform = [transform.value.x, transform.value.y, transform.value.zoom]
 
 invoke(async () => {
@@ -182,6 +184,20 @@ store.dimensions = {
   height: height.value,
 }
 
+invoke(async () => {
+  await until(() => !isNaN(width.value) && width.value > 0 && !isNaN(height.value) && height.value > 0).toBeTruthy()
+  hooks.load.trigger({
+    fitView: (params = { padding: 0.1 }) => fitView(params),
+    zoomIn,
+    zoomOut,
+    zoomTo,
+    setTransform,
+    project: onLoadProject(store),
+    getElements: onLoadGetElements(store),
+    toObject: onLoadToObject(store),
+  })
+})
+
 watch(
   [width, height],
   ([newWidth, newHeight]) => {
@@ -200,23 +216,6 @@ watch(
     ]),
   { flush: 'pre' },
 )
-
-const { zoomIn, zoomOut, zoomTo, transform: setTransform, fitView } = useZoomPanHelper()
-watchOnce(
-  () => !isNaN(width.value) && width.value > 0 && !isNaN(height.value) && height.value > 0,
-  () => {
-    hooks.load.trigger({
-      fitView: (params = { padding: 0.1 }) => fitView(params),
-      zoomIn,
-      zoomOut,
-      zoomTo,
-      setTransform,
-      project: onLoadProject(store),
-      getElements: onLoadGetElements(store),
-      toObject: onLoadToObject(store),
-    })
-  },
-)
 </script>
 <template>
   <Suspense>