refactor(flow): deferr initial loading to Renderer.vue component

* suspend flow while async processing is going on (fallback to loading component)

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

src/container/Renderer/Renderer.vue

@@ -0,0 +1,49 @@
+<script lang="ts" setup>
+import { useStore, useWindow, useZoomPanHelper } from '~/composables'
+import { Elements, FlowInstance } from '~/types'
+import { onLoadGetElements, onLoadProject, onLoadToObject } from '~/utils'
+
+interface RendererProps {
+  elements: Elements
+}
+
+const props = defineProps<RendererProps>()
+const store = useStore()
+
+// if there are preloaded elements we overwrite the current elements with the stored ones and reset the stored elements (so we can properly parse them)
+const hasInitialElements = store.elements.length
+const initialElements = hasInitialElements ? store.elements : props.elements
+if (hasInitialElements) store.elements = []
+
+await store.setElements(initialElements)
+store.isReady = true
+
+nextTick(async () => {
+  // if ssr we can't wait for dimensions, they'll never really exist
+  const window = useWindow()
+  if ('screen' in window)
+    await until(store.dimensions).toMatch(({ height, width }) => !isNaN(width) && width > 0 && !isNaN(height) && height > 0)
+
+  const { zoomIn, zoomOut, zoomTo, transform: setTransform, fitView } = useZoomPanHelper(store)
+  const instance: FlowInstance = {
+    fitView: (params = { padding: 0.1 }) => fitView(params),
+    zoomIn,
+    zoomOut,
+    zoomTo,
+    setTransform,
+    project: onLoadProject(store),
+    getElements: onLoadGetElements(store),
+    toObject: onLoadToObject(store),
+  }
+  store.hooks.load.trigger(instance)
+  store.instance = instance
+})
+</script>
+<script lang="ts">
+export default {
+  name: 'Renderer',
+}
+</script>
+<template>
+  <slot />
+</template>

src/container/VueFlow/VueFlow.vue

@@ -1,6 +1,5 @@
 <script lang="ts" setup>
 import { CSSProperties, onBeforeUnmount } from 'vue'
-import { invoke } from '@vueuse/core'
 import {
   ConnectionLineType,
   ConnectionMode,
@@ -11,7 +10,6 @@ import {
   NodeExtent,
   NodeTypes,
   EdgeTypes,
-  FlowInstance,
   Loading,
   FlowOptions,
 } from '../../types'
@@ -20,8 +18,8 @@ import SelectionPane from '../SelectionPane/SelectionPane.vue'
 import NodeRenderer from '../NodeRenderer/NodeRenderer.vue'
 import EdgeRenderer from '../EdgeRenderer/EdgeRenderer.vue'
 import LoadingIndicator from '../../components/Loading/LoadingIndicator.vue'
-import { createHooks, initFlow, useWindow, useZoomPanHelper } from '../../composables'
+import { createHooks, initFlow } from '../../composables'
-import { onLoadGetElements, onLoadProject, onLoadToObject } from '../../utils'
+import Renderer from '~/container/Renderer/Renderer.vue'
 
 interface FlowProps extends FlowOptions {
   id?: string
@@ -107,49 +105,27 @@ const props = withDefaults(defineProps<FlowProps>(), {
 const store = initFlow(emit, typeof props.storageKey === 'string' ? props.storageKey : props.id)
 const elements = useVModel(props, 'modelValue', emit)
 const options = Object.assign({}, store.$state, props)
-
-invoke(async () => {
 store.setState(options)
-  // if there are preloaded elements we overwrite the current elements with the stored ones
-  await store.setElements(store.elements.length ? store.elements : elements.value)
-  store.isReady = true
-
-  // if ssr we can't wait for dimensions, they'll never really exist
-  const window = useWindow()
-  if ('screen' in window)
-    await until(store.dimensions).toMatch(({ height, width }) => !isNaN(width) && width > 0 && !isNaN(height) && height > 0)
-
-  const { zoomIn, zoomOut, zoomTo, transform: setTransform, fitView } = useZoomPanHelper(store)
-  const instance: FlowInstance = {
-    fitView: (params = { padding: 0.1 }) => fitView(params),
-    zoomIn,
-    zoomOut,
-    zoomTo,
-    setTransform,
-    project: onLoadProject(store),
-    getElements: onLoadGetElements(store),
-    toObject: onLoadToObject(store),
-  }
-  store.hooks.load.trigger(instance)
-  store.instance = instance
-})
-
 watch(
   () => props,
   () => store.setState(props),
   { flush: 'post', deep: true },
 )
-watch(
+const { pause: pauseModel, resume: resumeModel } = pausableWatch(
   () => props.modelValue.length,
-  () => store.setElements(elements.value),
+  async () => await store.setElements(elements.value),
 )
-const { pause, resume } = pausableWatch(elements, store.setElements, { flush: 'post' })
+const { pause, resume } = pausableWatch(elements, async (val) => await store.setElements(val), { flush: 'post' })
 watch(
   () => store.elements,
   (val) => {
     pause()
+    pauseModel()
     elements.value = val
-    nextTick(resume)
+    setTimeout(() => {
+      resume()
+      resumeModel()
+    }, 1)
   },
   { flush: 'post', deep: true },
 )
@@ -175,6 +151,7 @@ export default {
     <Transition :key="`vue-flow-transition-${store.$id}`" :name="transitionName">
       <Suspense>
         <template #default>
+          <Renderer :elements="elements">
             <ZoomPane
               :key="`zoom-pane-${store.$id}`"
               :prevent-scrolling="store.preventScrolling"
@@ -262,6 +239,7 @@ export default {
                 <slot name="zoom-pane" v-bind="zoomPaneProps"></slot>
               </template>
             </ZoomPane>
+          </Renderer>
         </template>
         <template v-if="store.loading" #fallback>
           <slot :key="`loading-indicator-${store.$id}`" name="loading-indicator">