feat(docs): add animation edge to layouting example

docs/examples/layout/useRunProcess.js

@@ -18,7 +18,7 @@ export function useRunProcess(dagreGraph) {
   const executedNodes = new Set()
   const runningTasks = new Map()
 
-  async function runNode(node) {
+  async function runNode(node, isStart = false) {
     if (executedNodes.has(node.id)) {
       return
     }
@@ -30,33 +30,36 @@ export function useRunProcess(dagreGraph) {
     // Simulate an async process with a random timeout between 1 and 3 seconds
     const delay = Math.floor(Math.random() * 2000) + 1000
     return new Promise((resolve) => {
-      const timeout = setTimeout(async () => {
-        const children = graph.value.successors(node.id)
+      const timeout = setTimeout(
+        async () => {
+          const children = graph.value.successors(node.id)
 
-        // Randomly decide whether the node will throw an error
-        const willThrowError = Math.random() < 0.15
+          // Randomly decide whether the node will throw an error
+          const willThrowError = Math.random() < 0.15
 
-        if (willThrowError) {
-          updateNodeData(node.id, { isRunning: false, hasError: true })
+          if (willThrowError) {
+            updateNodeData(node.id, { isRunning: false, hasError: true })
+
+            await skipDescendants(node.id)
+            runningTasks.delete(node.id)
+
+            resolve()
+            return
+          }
+
+          updateNodeData(node.id, { isRunning: false, isFinished: true })
 
-          await skipDescendants(node.id)
           runningTasks.delete(node.id)
 
+          if (children.length > 0) {
+            // Run the process on the children in parallel
+            await Promise.all(children.map((id) => runNode({ id })))
+          }
+
           resolve()
-          return
-        }
-
-        updateNodeData(node.id, { isRunning: false, isFinished: true })
-
-        runningTasks.delete(node.id)
-
-        if (children.length > 0) {
-          // Run the process on the children in parallel
-          await Promise.all(children.map((id) => runNode({ id })))
-        }
-
-        resolve()
-      }, delay)
+        },
+        isStart ? 0 : delay,
+      )
 
       runningTasks.set(node.id, timeout)
     })
@@ -75,7 +78,7 @@ export function useRunProcess(dagreGraph) {
     const startingNodes = nodes.filter((node) => graph.value.predecessors(node.id)?.length === 0)
 
     // Run the process on all starting nodes in parallel
-    await Promise.all(startingNodes.map(runNode))
+    await Promise.all(startingNodes.map((node) => runNode(node, true)))
 
     clear()
   }