From 4e8ff6201ad95a303df9417af51ac23df5c7de7b Mon Sep 17 00:00:00 2001
From: Braks <78412429+bcakmakoglu@users.noreply.github.com>
Date: Sat, 20 Nov 2021 17:22:52 +0100
Subject: [PATCH] feat: Add loading indicator slot and prop

* While the graph is suspended we open up a loading indicator slot
* a prop option has to be passed to enable the indicator
* add some styles for a default loading text
* move loading event to after store has been initialized *and* zoom pane dimensions are present

Signed-off-by: Braks <78412429+bcakmakoglu@users.noreply.github.com>
---
 examples/Stress/StressExample.vue   |  8 ++-
 src/container/VueFlow/VueFlow.vue   | 95 ++++++++++++++++-------------
 src/container/ZoomPane/ZoomPane.vue | 24 +++-----
 src/store/stateStore.ts             |  4 +-
 src/store/utils.ts                  |  3 +-
 src/style.css                       |  7 +++
 src/types/types.ts                  |  1 +
 7 files changed, 81 insertions(+), 61 deletions(-)

diff --git a/examples/Stress/StressExample.vue b/examples/Stress/StressExample.vue
index 1d4b4304..68d24c35 100644
--- a/examples/Stress/StressExample.vue
+++ b/examples/Stress/StressExample.vue
@@ -49,7 +49,13 @@ const updateElements = () => {
 }
 </script>
 <template>
-  <VueFlow v-model="elements" @load="onLoad" @elementsRemove="onElementsRemove" @connect="onConnect">
+  <VueFlow
+    v-model="elements"
+    :show-loading-indicator="true"
+    @load="onLoad"
+    @elementsRemove="onElementsRemove"
+    @connect="onConnect"
+  >
     <MiniMap />
     <Controls />
     <Background />
diff --git a/src/container/VueFlow/VueFlow.vue b/src/container/VueFlow/VueFlow.vue
index f0d8371f..07dcb792 100644
--- a/src/container/VueFlow/VueFlow.vue
+++ b/src/container/VueFlow/VueFlow.vue
@@ -22,7 +22,7 @@ import SelectionPane from '../../container/SelectionPane/SelectionPane.vue'
 import NodeRenderer from '../../container/NodeRenderer/NodeRenderer.vue'
 import EdgeRenderer from '../../container/EdgeRenderer/EdgeRenderer.vue'
 import { createHooks, initFlow, useZoomPanHelper } from '../../composables'
-import { onLoadGetElements, onLoadProject, onLoadToObject } from '~/utils'
+import { onLoadGetElements, onLoadProject, onLoadToObject } from '../../utils'
 
 export interface FlowProps extends Partial<FlowOptions> {
   id?: string
@@ -62,6 +62,7 @@ export interface FlowProps extends Partial<FlowOptions> {
   zoomOnDoubleClick?: boolean
   edgeUpdaterRadius?: number
   storageKey?: string
+  showLoadingIndicator?: boolean
 }
 
 const emit = defineEmits([...Object.keys(createHooks()), 'update:elements', 'update:modelValue'])
@@ -103,6 +104,7 @@ const props = withDefaults(defineProps<FlowProps>(), {
   panOnScrollMode: PanOnScrollMode.Free,
   paneMoveable: true,
   edgeUpdaterRadius: 10,
+  showLoadingIndicator: false,
 })
 const store = initFlow(emit, typeof props.storageKey === 'string' ? props.storageKey : props.id, props.store)
 const elements = useVModel(props, props.elements.length ? 'elements' : 'modelValue', emit)
@@ -147,10 +149,13 @@ watch(
   },
   { flush: 'post', deep: true },
 )
-const { zoomIn, zoomOut, zoomTo, transform: setTransform, fitView } = useZoomPanHelper(store)
 
 invoke(async () => {
   await init(options)
+  store.isReady = true
+  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,
@@ -162,53 +167,59 @@ invoke(async () => {
     toObject: onLoadToObject(store),
   }
   store.hooks.load.trigger(instance)
-  store.isReady = true
   store.instance = instance
 })
 </script>
 <template>
   <div class="vue-flow">
-    <ZoomPane
-      :selection-key-code="store.selectionKeyCode"
-      :zoom-activation-key-code="store.zoomActivationKeyCode"
-      :default-zoom="store.defaultZoom"
-      :default-position="store.defaultPosition"
-      :zoom-on-scroll="store.zoomOnScroll"
-      :zoom-on-pinch="store.zoomOnPinch"
-      :zoom-on-double-click="store.zoomOnDoubleClick"
-      :pan-on-scroll="store.panOnScroll"
-      :pan-on-scroll-speed="store.panOnScrollSpeed"
-      :pan-on-scroll-mode="store.panOnScrollMode"
-      :pane-moveable="store.paneMoveable"
-    >
-      <template v-if="store.dimensions.width > 0 && !isNaN(store.dimensions.width)" #default="zoomPaneProps">
-        <SelectionPane
-          :delete-key-code="store.deleteKeyCode"
-          :multi-selection-key-code="store.multiSelectionKeyCode"
-          :selection-key-code="store.selectionKeyCode"
-        >
-          <NodeRenderer :select-nodes-on-drag="store.selectNodesOnDrag">
-            <template v-for="nodeName of Object.keys(store.getNodeTypes)" #[`node-${nodeName}`]="nodeProps">
-              <slot :name="`node-${nodeName}`" v-bind="nodeProps"></slot>
-            </template>
-          </NodeRenderer>
-          <EdgeRenderer
-            :connection-line-type="store.connectionLineType"
-            :connection-line-style="store.connectionLineStyle"
-            :arrow-head-color="store.arrowHeadColor"
-            :marker-end-id="store.markerEndId"
+    <Suspense>
+      <ZoomPane
+        :selection-key-code="store.selectionKeyCode"
+        :zoom-activation-key-code="store.zoomActivationKeyCode"
+        :default-zoom="store.defaultZoom"
+        :default-position="store.defaultPosition"
+        :zoom-on-scroll="store.zoomOnScroll"
+        :zoom-on-pinch="store.zoomOnPinch"
+        :zoom-on-double-click="store.zoomOnDoubleClick"
+        :pan-on-scroll="store.panOnScroll"
+        :pan-on-scroll-speed="store.panOnScrollSpeed"
+        :pan-on-scroll-mode="store.panOnScrollMode"
+        :pane-moveable="store.paneMoveable"
+      >
+        <template v-if="store.dimensions.width > 0 && !isNaN(store.dimensions.width)" #default="zoomPaneProps">
+          <SelectionPane
+            :delete-key-code="store.deleteKeyCode"
+            :multi-selection-key-code="store.multiSelectionKeyCode"
+            :selection-key-code="store.selectionKeyCode"
           >
-            <template v-for="edgeName of Object.keys(store.getEdgeTypes)" #[`edge-${edgeName}`]="edgeProps">
-              <slot :name="`edge-${edgeName}`" v-bind="edgeProps"></slot>
-            </template>
-            <template #custom-connection-line="customConnectionLineProps">
-              <slot name="custom-connection-line" v-bind="customConnectionLineProps"></slot>
-            </template>
-          </EdgeRenderer>
-        </SelectionPane>
-        <slot name="zoom-pane" v-bind="zoomPaneProps"></slot>
+            <NodeRenderer :select-nodes-on-drag="store.selectNodesOnDrag">
+              <template v-for="nodeName of Object.keys(store.getNodeTypes)" #[`node-${nodeName}`]="nodeProps">
+                <slot :name="`node-${nodeName}`" v-bind="nodeProps"></slot>
+              </template>
+            </NodeRenderer>
+            <EdgeRenderer
+              :connection-line-type="store.connectionLineType"
+              :connection-line-style="store.connectionLineStyle"
+              :arrow-head-color="store.arrowHeadColor"
+              :marker-end-id="store.markerEndId"
+            >
+              <template v-for="edgeName of Object.keys(store.getEdgeTypes)" #[`edge-${edgeName}`]="edgeProps">
+                <slot :name="`edge-${edgeName}`" v-bind="edgeProps"></slot>
+              </template>
+              <template #custom-connection-line="customConnectionLineProps">
+                <slot name="custom-connection-line" v-bind="customConnectionLineProps"></slot>
+              </template>
+            </EdgeRenderer>
+          </SelectionPane>
+          <slot name="zoom-pane" v-bind="zoomPaneProps"></slot>
+        </template>
+      </ZoomPane>
+      <template v-if="store.showLoadingIndicator" #fallback>
+        <slot name="loading-indicator">
+          <div class="vue-flow__loading-indicator">Almost ready...</div>
+        </slot>
       </template>
-    </ZoomPane>
+    </Suspense>
     <slot v-bind="{ store }"></slot>
   </div>
 </template>
diff --git a/src/container/ZoomPane/ZoomPane.vue b/src/container/ZoomPane/ZoomPane.vue
index 6fdf4262..d8990ec5 100644
--- a/src/container/ZoomPane/ZoomPane.vue
+++ b/src/container/ZoomPane/ZoomPane.vue
@@ -2,9 +2,9 @@
 import { D3ZoomEvent, zoom, zoomIdentity, ZoomTransform } from 'd3-zoom'
 import { get, invoke } from '@vueuse/core'
 import { pointer, select } from 'd3-selection'
-import { FlowInstance, FlowTransform, KeyCode, PanOnScrollMode } from '../../types'
-import { useKeyPress, useStore, useZoomPanHelper } from '../../composables'
-import { clamp, onLoadGetElements, onLoadProject, onLoadToObject } from '../../utils'
+import { FlowTransform, KeyCode, PanOnScrollMode } from '../../types'
+import { useKeyPress, useStore } from '../../composables'
+import { clamp } from '../../utils'
 
 interface ZoomPaneProps {
   selectionKeyCode?: KeyCode
@@ -181,9 +181,7 @@ store.dimensions = {
   height: height.value,
 }
 
-invoke(async () => {
-  await until(() => !isNaN(width.value) && width.value > 0 && !isNaN(height.value) && height.value > 0).toBeTruthy()
-})
+await until(() => store.isReady).toBe(true)
 
 watch(
   [width, height],
@@ -206,13 +204,11 @@ watch(
 </script>
 <template>
   <div ref="zoomPane" class="vue-flow__renderer vue-flow__zoompane">
-    <Suspense>
-      <slot
-        v-bind="{
-          transform,
-          dimensions: { width, height },
-        }"
-      />
-    </Suspense>
+    <slot
+      v-bind="{
+        transform,
+        dimensions: { width, height },
+      }"
+    />
   </div>
 </template>
diff --git a/src/store/stateStore.ts b/src/store/stateStore.ts
index 55b1c7ab..c99409c0 100644
--- a/src/store/stateStore.ts
+++ b/src/store/stateStore.ts
@@ -64,8 +64,8 @@ export default function flowStore(
           workerTerminate('SUCCESS')
         }
         this.elements = elements
-        this.nodes = next.nextNodes
-        this.edges = next.nextEdges
+        this.nodes = next?.nextNodes ?? []
+        this.edges = next?.nextEdges ?? []
       },
       updateNodeDimensions({ id, nodeElement, forceUpdate }) {
         const i = this.nodes.map((x) => x.id).indexOf(id)
diff --git a/src/store/utils.ts b/src/store/utils.ts
index 2e72e094..ea73edbd 100644
--- a/src/store/utils.ts
+++ b/src/store/utils.ts
@@ -88,8 +88,7 @@ export const initialState = (): FlowState => ({
 
   isReady: false,
   hooks: createHooks(),
-  storageKey: undefined,
-  instance: undefined,
+  showLoadingIndicator: false,
 
   vueFlowVersion: typeof __VUE_FLOW_VERSION__ !== 'undefined' ? __VUE_FLOW_VERSION__ : '-',
 })
diff --git a/src/style.css b/src/style.css
index f122d21d..83c11f92 100644
--- a/src/style.css
+++ b/src/style.css
@@ -185,3 +185,10 @@
   bottom: 10px;
   right: 10px;
 }
+
+.vue-flow__loading-indicator {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  font-size: 16px;
+}
diff --git a/src/types/types.ts b/src/types/types.ts
index d9998af6..989ea4b2 100644
--- a/src/types/types.ts
+++ b/src/types/types.ts
@@ -126,4 +126,5 @@ export interface FlowOptions {
   zoomOnDoubleClick?: boolean
   edgeUpdaterRadius?: number
   storageKey?: string
+  showLoadingIndicator?: boolean
 }