From 02264d77a83332c58601fbe1d6c8f8d3cba538f5 Mon Sep 17 00:00:00 2001
From: Joe Pavitt <joepavitt@flowforge.com>
Date: Tue, 1 Aug 2023 11:38:22 +0100
Subject: [PATCH 1/6] Add animated "starting" pill instead of static icon

---
 frontend/src/components/StatusBadge.vue       |  7 +-
 .../components/icons-animated/Starting.vue    | 71 +++++++++++++++++++
 2 files changed, 76 insertions(+), 2 deletions(-)
 create mode 100644 frontend/src/components/icons-animated/Starting.vue

diff --git a/frontend/src/components/StatusBadge.vue b/frontend/src/components/StatusBadge.vue
index e8de886335..f1123696e8 100644
--- a/frontend/src/components/StatusBadge.vue
+++ b/frontend/src/components/StatusBadge.vue
@@ -11,7 +11,7 @@
         <StopIcon v-if="status === 'stopping' || status === 'suspending'" class="w-4 h-4" />
         <RefreshIcon v-if="status === 'restarting'" class="w-4 h-4" />
         <DownloadIcon v-if="status === 'importing'" class="w-4 h-4" />
-        <DotsCircleHorizontalIcon v-if="status === 'starting'" class="w-4 h-4" />
+        <AnimIconStarting v-if="status === 'starting'" class="w-4 h-4" />
         <CloudUploadIcon v-if="status === 'loading'" class="w-4 h-4" />
         <CloudDownloadIcon v-if="status === 'installing'" class="w-4 h-4" />
         <SupportIcon v-if="status === 'safe'" class="w-4 h-4" />
@@ -33,6 +33,8 @@ import {
     SupportIcon
 } from '@heroicons/vue/outline'
 
+import AnimIconStarting from './icons-animated/Starting.vue'
+
 export default {
     name: 'StatusBadge',
     components: {
@@ -45,7 +47,8 @@ export default {
         PlayIcon,
         RefreshIcon,
         StopIcon,
-        SupportIcon
+        SupportIcon,
+        AnimIconStarting
     },
     props: {
         status: {
diff --git a/frontend/src/components/icons-animated/Starting.vue b/frontend/src/components/icons-animated/Starting.vue
new file mode 100644
index 0000000000..1f5260f524
--- /dev/null
+++ b/frontend/src/components/icons-animated/Starting.vue
@@ -0,0 +1,71 @@
+<template>
+    <div class="ff-icon-anim">
+        <span class="ff-icon-starting" />
+    </div>
+</template>
+
+<script>
+export default {
+    name: 'AnimIconStarting'
+}
+</script>
+
+<style lang="scss" scoped>
+@import '~@flowforge/forge-ui-components/dist/scss/forge-colors.scss';
+
+.ff-icon-anim {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+}
+
+.ff-icon-starting {
+    --cell-width: 2px;
+    --cell-offset: calc(var(--cell-width) * 1.5);
+    --anim-time: 0.5s;
+    position: relative;
+    width: var(--cell-width);
+    height: var(--cell-width);
+    border-radius: 5px;
+    background-color: $ff-grey-500;
+    color: $ff-grey-500;
+    animation: ff-icon-starting var(--anim-time) infinite linear alternate;
+    animation-delay: calc(var(--anim-time) / 2);
+}
+
+.ff-icon-starting::before, .ff-icon-starting::after {
+    content: "";
+    display: inline-block;
+    position: absolute;
+    top: 0;
+}
+.ff-icon-starting::before {
+    left: calc(-1 * var(--cell-offset));
+    width: var(--cell-width);
+    height: var(--cell-width);
+    border-radius: 5px;
+    background-color: $ff-grey-500;
+    color: $ff-grey-500;
+    animation: ff-icon-starting var(--anim-time) infinite alternate;
+    animation-delay: 0s;
+}
+.ff-icon-starting::after {
+    left: var(--cell-offset);
+    width: var(--cell-width);
+    height: var(--cell-width);
+    border-radius: 5px;
+    background-color: $ff-grey-500;
+    color: $ff-grey-500;
+    animation: ff-icon-starting var(--anim-time) infinite alternate;
+    animation-delay: var(--anim-time);
+}
+
+@keyframes ff-icon-starting {
+  0% {
+    background-color: $ff-grey-500;
+  }
+  50%, 100% {
+    background-color: rgba($ff-grey-500, 0.2);
+  }
+}
+</style>

From 310b8bf84bc7b2340fcbedac56adb4734a951bd4 Mon Sep 17 00:00:00 2001
From: Joe Pavitt <joepavitt@flowforge.com>
Date: Tue, 1 Aug 2023 11:40:34 +0100
Subject: [PATCH 2/6] use currentColor instead of hardcoded grey-500

---
 .../src/components/icons-animated/Starting.vue     | 14 +++++++-------
 1 file changed, 7 insertions(+), 7 deletions(-)

diff --git a/frontend/src/components/icons-animated/Starting.vue b/frontend/src/components/icons-animated/Starting.vue
index 1f5260f524..0b710b5f06 100644
--- a/frontend/src/components/icons-animated/Starting.vue
+++ b/frontend/src/components/icons-animated/Starting.vue
@@ -27,8 +27,8 @@ export default {
     width: var(--cell-width);
     height: var(--cell-width);
     border-radius: 5px;
-    background-color: $ff-grey-500;
-    color: $ff-grey-500;
+    background-color: currentColor;
+    color: currentColor;
     animation: ff-icon-starting var(--anim-time) infinite linear alternate;
     animation-delay: calc(var(--anim-time) / 2);
 }
@@ -44,8 +44,8 @@ export default {
     width: var(--cell-width);
     height: var(--cell-width);
     border-radius: 5px;
-    background-color: $ff-grey-500;
-    color: $ff-grey-500;
+    background-color: currentColor;
+    color: currentColor;
     animation: ff-icon-starting var(--anim-time) infinite alternate;
     animation-delay: 0s;
 }
@@ -54,15 +54,15 @@ export default {
     width: var(--cell-width);
     height: var(--cell-width);
     border-radius: 5px;
-    background-color: $ff-grey-500;
-    color: $ff-grey-500;
+    background-color: currentColor;
+    color: currentColor;
     animation: ff-icon-starting var(--anim-time) infinite alternate;
     animation-delay: var(--anim-time);
 }
 
 @keyframes ff-icon-starting {
   0% {
-    background-color: $ff-grey-500;
+    background-color: currentColor;
   }
   50%, 100% {
     background-color: rgba($ff-grey-500, 0.2);

From 3cc1828f6999259c2516cafa19728b73b8d84e90 Mon Sep 17 00:00:00 2001
From: Joe Pavitt <joepavitt@flowforge.com>
Date: Tue, 1 Aug 2023 11:41:54 +0100
Subject: [PATCH 3/6] Remove old import

---
 frontend/src/components/StatusBadge.vue | 2 --
 1 file changed, 2 deletions(-)

diff --git a/frontend/src/components/StatusBadge.vue b/frontend/src/components/StatusBadge.vue
index f1123696e8..150c1ffb69 100644
--- a/frontend/src/components/StatusBadge.vue
+++ b/frontend/src/components/StatusBadge.vue
@@ -23,7 +23,6 @@
 import {
     CloudDownloadIcon,
     CloudUploadIcon,
-    DotsCircleHorizontalIcon,
     DownloadIcon,
     ExclamationCircleIcon,
     ExclamationIcon,
@@ -40,7 +39,6 @@ export default {
     components: {
         CloudDownloadIcon,
         CloudUploadIcon,
-        DotsCircleHorizontalIcon,
         DownloadIcon,
         ExclamationCircleIcon,
         ExclamationIcon,

From 19fbc69562afcff45ffe7940faf0c615baedf292 Mon Sep 17 00:00:00 2001
From: Joe Pavitt <joepavitt@flowforge.com>
Date: Tue, 1 Aug 2023 12:00:12 +0100
Subject: [PATCH 4/6] Add "installing" animated icon

---
 frontend/src/components/StatusBadge.vue       |  5 +-
 .../components/icons-animated/Installing.vue  | 55 +++++++++++++++++++
 .../src/components/icons-animated/index.js    |  7 +++
 3 files changed, 65 insertions(+), 2 deletions(-)
 create mode 100644 frontend/src/components/icons-animated/Installing.vue
 create mode 100644 frontend/src/components/icons-animated/index.js

diff --git a/frontend/src/components/StatusBadge.vue b/frontend/src/components/StatusBadge.vue
index 150c1ffb69..e4f69e3bef 100644
--- a/frontend/src/components/StatusBadge.vue
+++ b/frontend/src/components/StatusBadge.vue
@@ -13,7 +13,7 @@
         <DownloadIcon v-if="status === 'importing'" class="w-4 h-4" />
         <AnimIconStarting v-if="status === 'starting'" class="w-4 h-4" />
         <CloudUploadIcon v-if="status === 'loading'" class="w-4 h-4" />
-        <CloudDownloadIcon v-if="status === 'installing'" class="w-4 h-4" />
+        <AnimIconInstalling v-if="status === 'installing'" class="w-3 h-3" />
         <SupportIcon v-if="status === 'safe'" class="w-4 h-4" />
         <span class="ml-1">{{ status }}</span>
     </div>
@@ -32,7 +32,7 @@ import {
     SupportIcon
 } from '@heroicons/vue/outline'
 
-import AnimIconStarting from './icons-animated/Starting.vue'
+import { AnimIconInstalling, AnimIconStarting } from './icons-animated/index.js'
 
 export default {
     name: 'StatusBadge',
@@ -46,6 +46,7 @@ export default {
         RefreshIcon,
         StopIcon,
         SupportIcon,
+        AnimIconInstalling,
         AnimIconStarting
     },
     props: {
diff --git a/frontend/src/components/icons-animated/Installing.vue b/frontend/src/components/icons-animated/Installing.vue
new file mode 100644
index 0000000000..7c5b1eedc6
--- /dev/null
+++ b/frontend/src/components/icons-animated/Installing.vue
@@ -0,0 +1,55 @@
+<template>
+    <div class="ff-icon-anim ff-icon-installing">
+        <ArrowDownIcon />
+    </div>
+</template>
+
+<script>
+import {
+    ArrowDownIcon
+} from '@heroicons/vue/outline'
+
+export default {
+    name: 'AnimIconStarting',
+    components: {
+        ArrowDownIcon
+    }
+}
+</script>
+
+<style lang="scss" scoped>
+@import '~@flowforge/forge-ui-components/dist/scss/forge-colors.scss';
+
+.ff-icon-anim {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+}
+
+.ff-icon-installing {
+    overflow: hidden;
+}
+
+.ff-icon-installing svg {
+    --anim-time: 0.75s;
+    position: relative;
+    color: currentColor;
+    animation: ff-icon-installing var(--anim-time) infinite linear;
+    animation-delay: calc(var(--anim-time) / 2);
+}
+
+@keyframes ff-icon-installing {
+  0% {
+    opacity: 0;
+    transform: translate(0, -100%);
+  }
+  50% {
+    opacity: 1;
+    transform: translate(0, 0);
+  }
+  100% {
+    opacity: 0;
+    transform: translate(0, 100%);
+  }
+}
+</style>
diff --git a/frontend/src/components/icons-animated/index.js b/frontend/src/components/icons-animated/index.js
new file mode 100644
index 0000000000..1aa73accf8
--- /dev/null
+++ b/frontend/src/components/icons-animated/index.js
@@ -0,0 +1,7 @@
+import AnimIconInstalling from './Installing.vue'
+import AnimIconStarting from './Starting.vue'
+
+export {
+    AnimIconStarting,
+    AnimIconInstalling
+}

From b9400076a0a468d344b3eadf6c6c608a10ab2f92 Mon Sep 17 00:00:00 2001
From: Joe Pavitt <joepavitt@flowforge.com>
Date: Tue, 1 Aug 2023 12:18:14 +0100
Subject: [PATCH 5/6] Add "restarting" animated icon

---
 frontend/src/components/StatusBadge.vue       |  9 ++--
 .../components/icons-animated/Restarting.vue  | 46 +++++++++++++++++++
 .../src/components/icons-animated/index.js    |  2 +
 3 files changed, 51 insertions(+), 6 deletions(-)
 create mode 100644 frontend/src/components/icons-animated/Restarting.vue

diff --git a/frontend/src/components/StatusBadge.vue b/frontend/src/components/StatusBadge.vue
index e4f69e3bef..1a78ee3ffd 100644
--- a/frontend/src/components/StatusBadge.vue
+++ b/frontend/src/components/StatusBadge.vue
@@ -9,7 +9,7 @@
         <ExclamationIcon v-if="status === 'suspended'" class="w-4 h-4" />
         <PlayIcon v-if="status === 'running'" class="w-4 h-4" />
         <StopIcon v-if="status === 'stopping' || status === 'suspending'" class="w-4 h-4" />
-        <RefreshIcon v-if="status === 'restarting'" class="w-4 h-4" />
+        <AnimIconRestarting v-if="status === 'restarting'" class="w-4 h-4" />
         <DownloadIcon v-if="status === 'importing'" class="w-4 h-4" />
         <AnimIconStarting v-if="status === 'starting'" class="w-4 h-4" />
         <CloudUploadIcon v-if="status === 'loading'" class="w-4 h-4" />
@@ -21,32 +21,29 @@
 
 <script>
 import {
-    CloudDownloadIcon,
     CloudUploadIcon,
     DownloadIcon,
     ExclamationCircleIcon,
     ExclamationIcon,
     PlayIcon,
-    RefreshIcon,
     StopIcon,
     SupportIcon
 } from '@heroicons/vue/outline'
 
-import { AnimIconInstalling, AnimIconStarting } from './icons-animated/index.js'
+import { AnimIconInstalling, AnimIconRestarting, AnimIconStarting } from './icons-animated/index.js'
 
 export default {
     name: 'StatusBadge',
     components: {
-        CloudDownloadIcon,
         CloudUploadIcon,
         DownloadIcon,
         ExclamationCircleIcon,
         ExclamationIcon,
         PlayIcon,
-        RefreshIcon,
         StopIcon,
         SupportIcon,
         AnimIconInstalling,
+        AnimIconRestarting,
         AnimIconStarting
     },
     props: {
diff --git a/frontend/src/components/icons-animated/Restarting.vue b/frontend/src/components/icons-animated/Restarting.vue
new file mode 100644
index 0000000000..ab5256ad13
--- /dev/null
+++ b/frontend/src/components/icons-animated/Restarting.vue
@@ -0,0 +1,46 @@
+<template>
+    <div class="ff-icon-anim ff-icon-restarting">
+        <RefreshIcon />
+    </div>
+</template>
+
+<script>
+import {
+    RefreshIcon
+} from '@heroicons/vue/outline'
+
+export default {
+    name: 'AnimIconStarting',
+    components: {
+        RefreshIcon
+    }
+}
+</script>
+
+<style lang="scss" scoped>
+@import '~@flowforge/forge-ui-components/dist/scss/forge-colors.scss';
+
+.ff-icon-restarting svg {
+    --anim-time: 1s;
+    position: relative;
+    color: currentColor;
+    animation: ff-icon-restarting var(--anim-time) infinite linear;
+}
+
+@keyframes ff-icon-restarting {
+  0% {
+    opacity: 0.2;
+    transform: rotate(360deg);
+  }
+  33% {
+    opacity: 1;
+  }
+  66% {
+    opacity: 1;
+  }
+  100% {
+    opacity: 0.2;
+    transform: rotate(0deg);
+  }
+}
+</style>
diff --git a/frontend/src/components/icons-animated/index.js b/frontend/src/components/icons-animated/index.js
index 1aa73accf8..c5c6e7a426 100644
--- a/frontend/src/components/icons-animated/index.js
+++ b/frontend/src/components/icons-animated/index.js
@@ -1,7 +1,9 @@
 import AnimIconInstalling from './Installing.vue'
+import AnimIconRestarting from './Restarting.vue'
 import AnimIconStarting from './Starting.vue'
 
 export {
+    AnimIconRestarting,
     AnimIconStarting,
     AnimIconInstalling
 }

From 6ffd4554d879b3e214e7ae00409a3a2689b85bd6 Mon Sep 17 00:00:00 2001
From: Joe Pavitt <joepavitt@flowforge.com>
Date: Tue, 1 Aug 2023 12:20:45 +0100
Subject: [PATCH 6/6] Copy installing anim to "Importing" too

---
 frontend/src/components/StatusBadge.vue | 4 +---
 1 file changed, 1 insertion(+), 3 deletions(-)

diff --git a/frontend/src/components/StatusBadge.vue b/frontend/src/components/StatusBadge.vue
index 1a78ee3ffd..f5a2726e9c 100644
--- a/frontend/src/components/StatusBadge.vue
+++ b/frontend/src/components/StatusBadge.vue
@@ -10,7 +10,7 @@
         <PlayIcon v-if="status === 'running'" class="w-4 h-4" />
         <StopIcon v-if="status === 'stopping' || status === 'suspending'" class="w-4 h-4" />
         <AnimIconRestarting v-if="status === 'restarting'" class="w-4 h-4" />
-        <DownloadIcon v-if="status === 'importing'" class="w-4 h-4" />
+        <AnimIconInstalling v-if="status === 'importing'" class="w-4 h-4" />
         <AnimIconStarting v-if="status === 'starting'" class="w-4 h-4" />
         <CloudUploadIcon v-if="status === 'loading'" class="w-4 h-4" />
         <AnimIconInstalling v-if="status === 'installing'" class="w-3 h-3" />
@@ -22,7 +22,6 @@
 <script>
 import {
     CloudUploadIcon,
-    DownloadIcon,
     ExclamationCircleIcon,
     ExclamationIcon,
     PlayIcon,
@@ -36,7 +35,6 @@ export default {
     name: 'StatusBadge',
     components: {
         CloudUploadIcon,
-        DownloadIcon,
         ExclamationCircleIcon,
         ExclamationIcon,
         PlayIcon,