From 0c441b35dfb0d2072276a432c1b0a2684197795b Mon Sep 17 00:00:00 2001
From: braks <78412429+bcakmakoglu@users.noreply.github.com>
Date: Thu, 8 Feb 2024 22:46:38 +0100
Subject: [PATCH] chore(docs): add spinner to stop btn

---
 docs/examples/layout/App.vue         | 40 ++++++++++++++++++++++++----
 docs/examples/layout/ProcessNode.vue | 18 -------------
 2 files changed, 35 insertions(+), 23 deletions(-)

diff --git a/docs/examples/layout/App.vue b/docs/examples/layout/App.vue
index e591a3e8..c6123bbb 100644
--- a/docs/examples/layout/App.vue
+++ b/docs/examples/layout/App.vue
@@ -51,7 +51,7 @@ async function layoutGraph(direction) {
 </script>
 
 <template>
-  <div class="layoutflow">
+  <div class="layout-flow">
     <VueFlow :nodes="nodes" :edges="edges" @nodes-initialized="layoutGraph('LR')">
       <template #node-process="props">
         <ProcessNode :data="props.data" :source-position="props.sourcePosition" :target-position="props.targetPosition" />
@@ -75,8 +75,9 @@ async function layoutGraph(direction) {
 
       <Panel class="process-panel" position="top-right">
         <div class="layout-panel">
-          <button v-if="isRunning" title="stop" @click="stop">
+          <button v-if="isRunning" class="stop-btn" title="stop" @click="stop">
             <Icon name="stop" />
+            <span class="spinner" />
           </button>
           <button v-else title="start" @click="run(nodes)">
             <Icon name="play" />
@@ -105,7 +106,7 @@ async function layoutGraph(direction) {
 </template>
 
 <style>
-.layoutflow {
+.layout-flow {
   background-color: #1a192b;
   height: 100%;
   width: 100%;
@@ -126,8 +127,7 @@ async function layoutGraph(direction) {
   flex-direction: column;
 }
 
-.process-panel button,
-.layout-panel button {
+.process-panel button {
   border: none;
   cursor: pointer;
   background-color: #4a5568;
@@ -161,4 +161,34 @@ async function layoutGraph(direction) {
   color: white;
   font-size: 12px;
 }
+
+.stop-btn svg {
+  display: none;
+}
+
+.stop-btn:hover svg {
+  display: block;
+}
+
+.stop-btn:hover .spinner {
+  display: none;
+}
+
+.spinner {
+  border: 3px solid #f3f3f3;
+  border-top: 3px solid #2563eb;
+  border-radius: 50%;
+  width: 10px;
+  height: 10px;
+  animation: spin 1s linear infinite;
+}
+
+@keyframes spin {
+  0% {
+    transform: rotate(0deg);
+  }
+  100% {
+    transform: rotate(360deg);
+  }
+}
 </style>
diff --git a/docs/examples/layout/ProcessNode.vue b/docs/examples/layout/ProcessNode.vue
index 32050947..9ebea32a 100644
--- a/docs/examples/layout/ProcessNode.vue
+++ b/docs/examples/layout/ProcessNode.vue
@@ -104,22 +104,4 @@ const processLabel = toRef(() => {
   background: transparent;
   font-size: 12px;
 }
-
-.spinner {
-  border: 3px solid #f3f3f3;
-  border-top: 3px solid #2563eb;
-  border-radius: 50%;
-  width: 10px;
-  height: 10px;
-  animation: spin 1s linear infinite;
-}
-
-@keyframes spin {
-  0% {
-    transform: rotate(0deg);
-  }
-  100% {
-    transform: rotate(360deg);
-  }
-}
 </style>