feat(docs): wait for edge animation to finish to load node

docs/examples/layout/AnimationEdge.vue

@@ -1,6 +1,6 @@
 <script setup>
 import { computed, nextTick, ref, toRef, watch } from 'vue'
-import { BaseEdge, EdgeLabelRenderer, Position, getSmoothStepPath, useNodesData } from '@vue-flow/core'
+import { BaseEdge, EdgeLabelRenderer, Position, getSmoothStepPath, useNodesData, useVueFlow } from '@vue-flow/core'
 import { TransitionPresets, executeTransition } from '@vueuse/core'
 
 const props = defineProps({
@@ -42,6 +42,8 @@ const props = defineProps({
   },
 })
 
+const { findEdge } = useVueFlow()
+
 const nodesData = useNodesData([props.target, props.source])
 
 const edgePoint = ref(0)
@@ -58,6 +60,8 @@ const sourceNodeData = toRef(() => nodesData.value[1])
 
 const isFinished = toRef(() => sourceNodeData.value.isFinished)
 
+const isSkipped = toRef(() => targetNodeData.value.isSkipped)
+
 const isAnimating = ref(false)
 
 const edgeColor = toRef(() => {
@@ -73,7 +77,7 @@ const edgeColor = toRef(() => {
     return '#fbbf24'
   }
 
-  if (targetNodeData.value.isRunning) {
+  if (targetNodeData.value.isRunning || isAnimating.value) {
     return '#2563eb'
   }
 
@@ -82,6 +86,25 @@ const edgeColor = toRef(() => {
 
 const path = computed(() => getSmoothStepPath(props))
 
+watch(isSkipped, (isSkipped) => {
+  if (isSkipped) {
+    edgePoint.value = 0
+    currentLength.value = 0
+    isAnimating.value = false
+  }
+})
+
+watch(isAnimating, (isAnimating) => {
+  const edge = findEdge(props.id)
+
+  if (edge) {
+    edge.data = {
+      ...edge.data,
+      isAnimating,
+    }
+  }
+})
+
 watch(edgePoint, (point) => {
   const pathEl = edgeRef.value?.pathEl
 
@@ -131,6 +154,7 @@ async function runAnimation() {
 
   await executeTransition(edgePoint, from, totalLength, {
     transition: TransitionPresets.easeInOutCubic,
+    duration: Math.max(1500, totalLength / 2),
   })
 
   isAnimating.value = false
@@ -149,14 +173,29 @@ export default {
 
   <EdgeLabelRenderer v-if="isAnimating">
     <div
-      :style="{
-        position: 'absolute',
-        transform: `translate(-50%, -50%) translate(${labelPosition.x}px,${labelPosition.y}px)`,
-        pointerEvents: 'all',
-      }"
-      class="nodrag nopan"
+      :style="{ transform: `translate(-50%, -50%) translate(${labelPosition.x}px,${labelPosition.y}px)` }"
+      class="nodrag nopan animated-edge-label"
     >
-      📦
+      <span class="truck">
+        <span class="box">📦</span>
+        🚚
+      </span>
     </div>
   </EdgeLabelRenderer>
 </template>
+
+<style>
+.animated-edge-label {
+  position: absolute;
+}
+
+.truck {
+  position: relative;
+  display: inline-block;
+}
+
+.box {
+  position: absolute;
+  top: -10px;
+}
+</style>