refactore(store)!: Remove transition and loading.transition property

* Tranisitions break testing and are superflous

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

examples/Stress/StressExample.vue

@@ -54,7 +54,7 @@ const updateElements = () => {
 <template>
   <VueFlow
     v-model="elements"
-    :loading="{ label: 'Loading...', transition: { name: 'fade', mode: 'out-in' } }"
+    loading="One moment please..."
     @load="onLoad"
     @elementsRemove="onElementsRemove"
     @connect="onConnect"

src/container/VueFlow/VueFlow.vue

@@ -10,7 +10,6 @@ import {
   NodeExtent,
   NodeTypes,
   EdgeTypes,
-  Loading,
   FlowOptions,
 } from '../../types'
 import Renderer from '../Renderer/Renderer.vue'
@@ -59,7 +58,7 @@ interface FlowProps extends FlowOptions {
   zoomOnDoubleClick?: boolean
   edgeUpdaterRadius?: number
   storageKey?: string
-  loading?: Loading
+  loading?: string
 }
 
 const props = withDefaults(defineProps<FlowProps>(), {
@@ -102,7 +101,6 @@ const props = withDefaults(defineProps<FlowProps>(), {
   panOnScrollMode: PanOnScrollMode.Free,
   paneMoveable: true,
   edgeUpdaterRadius: 10,
-  loading: false,
 })
 const emit = defineEmits([...Object.keys(createHooks()), 'update:modelValue'])
 const store = initFlow(emit, props.id)
@@ -136,15 +134,6 @@ until(() => store.isReady)
       { flush: 'post', deep: true },
     )
   })
-
-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
-})
 </script>
 <script lang="ts">
 export default {
@@ -153,7 +142,6 @@ export default {
 </script>
 <template>
   <div class="vue-flow">
-    <Transition :name="transitionName">
     <Suspense timeout="0">
       <template #default>
         <Renderer :key="`renderer-${store.id}`" :elements="elements">
@@ -243,15 +231,14 @@ export default {
           </ZoomPane>
         </Renderer>
       </template>
-        <template v-if="store.loading" #fallback>
+      <template #fallback>
-          <slot :key="`loading-indicator-${store.id}`" name="loading-indicator">
+        <slot name="loading-indicator">
-            <LoadingIndicator :key="`default-loading-indicator-${store.id}`" v-bind="store.loading">
+          <LoadingIndicator :label="store.loading">
             <slot name="loading-label" />
           </LoadingIndicator>
         </slot>
       </template>
     </Suspense>
-    </Transition>
     <slot v-bind="store"></slot>
   </div>
 </template>

src/types/flow.ts

@@ -88,20 +88,6 @@ 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
@@ -151,5 +137,5 @@ export interface FlowOptions {
   preventScrolling?: boolean
   edgeUpdaterRadius?: number
   storageKey?: string
-  loading?: Loading
+  loading?: string
 }

src/utils/store.ts

@@ -93,7 +93,7 @@ export const initialState = (): FlowState => ({
   zoomActivationKeyCode: undefined,
 
   hooks: createHooks(),
-  loading: false,
+  loading: undefined,
 
   markerEndId: undefined,
   storageKey: undefined,