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

docs/examples/layout/useRunProcess.js

@@ -10,7 +10,7 @@ import { useVueFlow } from '@vue-flow/core'
  * When a node has multiple descendants, it will run them in parallel.
  */
 export function useRunProcess(dagreGraph) {
-  const { updateNodeData } = useVueFlow()
+  const { updateNodeData, getConnectedEdges } = useVueFlow()
 
   const graph = toRef(() => toValue(dagreGraph))
 
@@ -23,6 +23,15 @@ export function useRunProcess(dagreGraph) {
       return
     }
 
+    const incomers = getConnectedEdges(node.id).filter((connection) => connection.target === node.id)
+
+    await Promise.all(incomers.map((incomer) => until(() => !incomer.data.isAnimating)))
+
+    if (!isRunning.value) {
+      // The process was stopped
+      return
+    }
+
     executedNodes.add(node.id)
 
     updateNodeData(node.id, { isRunning: true, isFinished: false, hasError: false, isCancelled: false })
@@ -121,3 +130,14 @@ export function useRunProcess(dagreGraph) {
 
   return { run, stop, reset, isRunning }
 }
+
+async function until(condition) {
+  return new Promise((resolve) => {
+    const interval = setInterval(() => {
+      if (condition()) {
+        clearInterval(interval)
+        resolve()
+      }
+    }, 100)
+  })
+}