feat: Add dedicated default loading component

* add option to pass a transition name

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

examples/Stress/StressExample.vue

@@ -51,7 +51,7 @@ const updateElements = () => {
 <template>
   <VueFlow
     v-model="elements"
-    :show-loading-indicator="true"
+    :loading="{ label: 'Loading...', transition: { name: 'fade', mode: 'out-in' } }"
     @load="onLoad"
     @elementsRemove="onElementsRemove"
     @connect="onConnect"
@@ -66,3 +66,14 @@ const updateElements = () => {
     </div>
   </VueFlow>
 </template>
+<style>
+.fade-enter-active,
+.fade-leave-active {
+  transition: opacity 0.35s ease;
+}
+
+.fade-enter-from,
+.fade-leave-active {
+  opacity: 0;
+}
+</style>

src/components/Loading/LoadingIndicator.vue

@@ -0,0 +1,18 @@
+<script lang="ts" setup>
+import { CSSProperties } from 'vue'
+
+interface LoadingIndicatorProps {
+  label?: string
+  class?: string
+  style?: CSSProperties
+}
+
+const props = withDefaults(defineProps<LoadingIndicatorProps>(), {
+  label: 'Almost ready...',
+})
+</script>
+<template>
+  <div class="vue-flow__loading-indicator" :class="props.class" :style="props.style">
+    <slot name="label"> {{ props.label }} </slot>
+  </div>
+</template>

src/container/VueFlow/VueFlow.vue

@@ -16,11 +16,13 @@ import {
   FlowStore,
   FlowState,
   FlowInstance,
+  Loading,
 } from '../../types'
-import ZoomPane from '../../container/ZoomPane/ZoomPane.vue'
+import ZoomPane from '../ZoomPane/ZoomPane.vue'
-import SelectionPane from '../../container/SelectionPane/SelectionPane.vue'
+import SelectionPane from '../SelectionPane/SelectionPane.vue'
-import NodeRenderer from '../../container/NodeRenderer/NodeRenderer.vue'
+import NodeRenderer from '../NodeRenderer/NodeRenderer.vue'
-import EdgeRenderer from '../../container/EdgeRenderer/EdgeRenderer.vue'
+import EdgeRenderer from '../EdgeRenderer/EdgeRenderer.vue'
+import LoadingIndicator from '../../components/Loading/LoadingIndicator.vue'
 import { createHooks, initFlow, useZoomPanHelper } from '../../composables'
 import { onLoadGetElements, onLoadProject, onLoadToObject } from '../../utils'
 
@@ -62,7 +64,7 @@ export interface FlowProps extends Partial<FlowOptions> {
   zoomOnDoubleClick?: boolean
   edgeUpdaterRadius?: number
   storageKey?: string
-  showLoadingIndicator?: boolean
+  loading?: Loading
 }
 
 const emit = defineEmits([...Object.keys(createHooks()), 'update:elements', 'update:modelValue'])
@@ -104,7 +106,7 @@ const props = withDefaults(defineProps<FlowProps>(), {
   panOnScrollMode: PanOnScrollMode.Free,
   paneMoveable: true,
   edgeUpdaterRadius: 10,
-  showLoadingIndicator: false,
+  loading: 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)
@@ -169,57 +171,89 @@ invoke(async () => {
   store.hooks.load.trigger(instance)
   store.instance = instance
 })
+
+const transitionName = computed(() => {
+  let name = ''
+  if (typeof store.loading === 'object' && store.loading.transition) {
+    if (typeof store.loading.transition === 'string') name = store.loading.transition
+    else name = store.loading.transition.name
+  }
+  return name
+})
+
+const transitionMode = computed(() => {
+  let mode = ''
+  if (typeof store.loading === 'object' && store.loading.transition) {
+    if (typeof store.loading.transition !== 'string') mode = store.loading.transition.mode
+  }
+  return mode
+})
 </script>
 <template>
   <div class="vue-flow">
-    <Suspense>
+    <Transition key="vue-flow-transition" :name="transitionName">
-      <ZoomPane
+      <Suspense>
-        :selection-key-code="store.selectionKeyCode"
+        <ZoomPane
-        :zoom-activation-key-code="store.zoomActivationKeyCode"
+          key="zoom-pane"
-        :default-zoom="store.defaultZoom"
+          :selection-key-code="store.selectionKeyCode"
-        :default-position="store.defaultPosition"
+          :zoom-activation-key-code="store.zoomActivationKeyCode"
-        :zoom-on-scroll="store.zoomOnScroll"
+          :default-zoom="store.defaultZoom"
-        :zoom-on-pinch="store.zoomOnPinch"
+          :default-position="store.defaultPosition"
-        :zoom-on-double-click="store.zoomOnDoubleClick"
+          :zoom-on-scroll="store.zoomOnScroll"
-        :pan-on-scroll="store.panOnScroll"
+          :zoom-on-pinch="store.zoomOnPinch"
-        :pan-on-scroll-speed="store.panOnScrollSpeed"
+          :zoom-on-double-click="store.zoomOnDoubleClick"
-        :pan-on-scroll-mode="store.panOnScrollMode"
+          :pan-on-scroll="store.panOnScroll"
-        :pane-moveable="store.paneMoveable"
+          :pan-on-scroll-speed="store.panOnScrollSpeed"
-      >
+          :pan-on-scroll-mode="store.panOnScrollMode"
-        <template v-if="store.dimensions.width > 0 && !isNaN(store.dimensions.width)" #default="zoomPaneProps">
+          :pane-moveable="store.paneMoveable"
-          <SelectionPane
+        >
-            :delete-key-code="store.deleteKeyCode"
+          <template #default="zoomPaneProps">
-            :multi-selection-key-code="store.multiSelectionKeyCode"
+            <SelectionPane
-            :selection-key-code="store.selectionKeyCode"
+              key="selection-pane"
-          >
+              :delete-key-code="store.deleteKeyCode"
-            <NodeRenderer :select-nodes-on-drag="store.selectNodesOnDrag">
+              :multi-selection-key-code="store.multiSelectionKeyCode"
-              <template v-for="nodeName of Object.keys(store.getNodeTypes)" #[`node-${nodeName}`]="nodeProps">
+              :selection-key-code="store.selectionKeyCode"
-                <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">
+              <NodeRenderer key="node-renderer" :select-nodes-on-drag="store.selectNodesOnDrag">
-                <slot :name="`edge-${edgeName}`" v-bind="edgeProps"></slot>
+                <template
-              </template>
+                  v-for="nodeName of Object.keys(store.getNodeTypes)"
-              <template #custom-connection-line="customConnectionLineProps">
+                  #[`node-${nodeName}`]="nodeProps"
-                <slot name="custom-connection-line" v-bind="customConnectionLineProps"></slot>
+                  :key="`node-${nodeName}`"
-              </template>
+                >
-            </EdgeRenderer>
+                  <slot :name="`node-${nodeName}`" v-bind="nodeProps"></slot>
-          </SelectionPane>
+                </template>
-          <slot name="zoom-pane" v-bind="zoomPaneProps"></slot>
+              </NodeRenderer>
+              <EdgeRenderer
+                key="edge-renderer"
+                :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"
+                  :key="`edge-${edgeName}`"
+                >
+                  <slot :name="`edge-${edgeName}`" v-bind="edgeProps"></slot>
+                </template>
+                <template #custom-connection-line="customConnectionLineProps">
+                  <slot key="connection-line" 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.loading" #fallback>
+          <slot key="loading-indicator" name="loading-indicator">
+            <LoadingIndicator key="default-loading-indicator" v-bind="store.loading">
+              <slot name="loading-label" />
+            </LoadingIndicator>
+          </slot>
         </template>
-      </ZoomPane>
+      </Suspense>
-      <template v-if="store.showLoadingIndicator" #fallback>
+    </Transition>
-        <slot name="loading-indicator">
-          <div class="vue-flow__loading-indicator">Almost ready...</div>
-        </slot>
-      </template>
-    </Suspense>
     <slot v-bind="{ store }"></slot>
   </div>
 </template>

src/store/utils.ts

@@ -88,7 +88,7 @@ export const initialState = (): FlowState => ({
 
   isReady: false,
   hooks: createHooks(),
-  showLoadingIndicator: false,
+  loading: false,
 
   vueFlowVersion: typeof __VUE_FLOW_VERSION__ !== 'undefined' ? __VUE_FLOW_VERSION__ : '-',
 })

src/types/store.ts

@@ -20,13 +20,9 @@ import { D3Selection, D3Zoom, D3ZoomHandler } from './panel'
 import { FlowHooks } from './hooks'
 
 export interface FlowState extends FlowOptions {
-  dimensions: Dimensions
-  transform: Transform
   elements: Elements
   nodes: Node[]
-  nodeTypes?: NodeTypes
   edges: Edge[]
-  edgeTypes?: EdgeTypes
   selectedElements?: Elements
   selectedNodesBbox: Rect
 
@@ -37,11 +33,13 @@ export interface FlowState extends FlowOptions {
   maxZoom: number
   translateExtent: TranslateExtent
   nodeExtent: NodeExtent
+  dimensions: Dimensions
+  transform: Transform
 
   nodesSelectionActive: boolean
   selectionActive: boolean
-
   userSelectionRect: SelectionRect
+  multiSelectionActive: boolean
 
   connectionNodeId?: ElementId
   connectionHandleId?: ElementId
@@ -56,10 +54,6 @@ export interface FlowState extends FlowOptions {
   nodesConnectable: boolean
   elementsSelectable: boolean
 
-  multiSelectionActive: boolean
-
-  vueFlowVersion: string
-
   onConnect?: OnConnectFunc
   onConnectStart?: OnConnectStartFunc
   onConnectStop?: OnConnectStopFunc
@@ -67,8 +61,9 @@ export interface FlowState extends FlowOptions {
 
   isReady: boolean
   hooks: FlowHooks
-  storageKey?: string
   instance?: FlowInstance
+
+  vueFlowVersion: string
 }
 
 export interface FlowGetters {

src/types/types.ts

@@ -78,6 +78,20 @@ export type FitViewFunc = (fitViewOptions?: FitViewParams) => void
 export type ProjectFunc = (position: XYPosition) => XYPosition
 export type ToObjectFunc<T = any> = () => FlowExportObject<T>
 
+export type Loading =
+  | {
+      label: string
+      transition?:
+        | string
+        | {
+            name: string
+            mode: string
+          }
+      style: CSSProperties
+      class: string
+    }
+  | boolean
+
 export type FlowInstance<T = any> = {
   zoomIn: () => void
   zoomOut: () => void
@@ -126,5 +140,5 @@ export interface FlowOptions {
   zoomOnDoubleClick?: boolean
   edgeUpdaterRadius?: number
   storageKey?: string
-  showLoadingIndicator?: boolean
+  loading?: Loading
 }