From dc8faecd8cac8d22ee08b07fa521c79f2d2b69e0 Mon Sep 17 00:00:00 2001
From: braks <78412429+bcakmakoglu@users.noreply.github.com>
Date: Wed, 7 Feb 2024 22:42:42 +0100
Subject: [PATCH] chore(docs): cleanup layouting example

---
 docs/examples/layout/AnimationEdge.vue | 14 +++++++++-----
 docs/examples/layout/ProcessNode.vue   |  2 +-
 docs/examples/layout/useRunProcess.js  |  2 +-
 3 files changed, 11 insertions(+), 7 deletions(-)

diff --git a/docs/examples/layout/AnimationEdge.vue b/docs/examples/layout/AnimationEdge.vue
index 4bfb5aa9..35f1206a 100644
--- a/docs/examples/layout/AnimationEdge.vue
+++ b/docs/examples/layout/AnimationEdge.vue
@@ -1,5 +1,5 @@
 <script setup>
-import { computed, ref, toRef, watch } from 'vue'
+import { computed, nextTick, ref, toRef, watch } from 'vue'
 import { BaseEdge, EdgeLabelRenderer, Position, getSmoothStepPath, useNodesData } from '@vue-flow/core'
 import { TransitionPresets, executeTransition } from '@vueuse/core'
 
@@ -94,9 +94,11 @@ watch(isFinished, async (isFinished) => {
   if (isFinished) {
     await runAnimation()
 
-    edgePoint.value = 0
-    currentLength.value = 0
-    labelPosition.value = { x: 0, y: 0 }
+    nextTick(() => {
+      edgePoint.value = 0
+      currentLength.value = 0
+      labelPosition.value = { x: 0, y: 0 }
+    })
   }
 })
 
@@ -107,7 +109,9 @@ async function runAnimation() {
     return
   }
 
-  isAnimating.value = true
+  nextTick(() => {
+    isAnimating.value = true
+  })
 
   const totalLength = pathEl.getTotalLength()
 
diff --git a/docs/examples/layout/ProcessNode.vue b/docs/examples/layout/ProcessNode.vue
index b9567ea9..92164434 100644
--- a/docs/examples/layout/ProcessNode.vue
+++ b/docs/examples/layout/ProcessNode.vue
@@ -77,7 +77,7 @@ const processLabel = toRef(() => {
     <Handle v-if="!isSender" type="target" :position="targetPosition" />
     <Handle v-if="!isReceiver" type="source" :position="sourcePosition" />
 
-    <div v-if="data.isRunning" class="spinner" />
+    <div v-if="!isSender && data.isRunning" class="spinner" />
     <span v-else>
       {{ processLabel }}
     </span>
diff --git a/docs/examples/layout/useRunProcess.js b/docs/examples/layout/useRunProcess.js
index 34a90f60..e2615ba8 100644
--- a/docs/examples/layout/useRunProcess.js
+++ b/docs/examples/layout/useRunProcess.js
@@ -37,7 +37,7 @@ export function useRunProcess(dagreGraph) {
           // Randomly decide whether the node will throw an error
           const willThrowError = Math.random() < 0.15
 
-          if (willThrowError) {
+          if (!isStart && willThrowError) {
             updateNodeData(node.id, { isRunning: false, hasError: true })
 
             await skipDescendants(node.id)