Add animated status icons

frontend/src/components/StatusBadge.vue

@@ -9,43 +9,40 @@
         <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" />
-        <DownloadIcon v-if="status === 'importing'" class="w-4 h-4" />
-        <DotsCircleHorizontalIcon v-if="status === 'starting'" class="w-4 h-4" />
+        <AnimIconRestarting v-if="status === 'restarting'" 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" />
-        <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>
 </template>
 
 <script>
 import {
-    CloudDownloadIcon,
     CloudUploadIcon,
-    DotsCircleHorizontalIcon,
-    DownloadIcon,
     ExclamationCircleIcon,
     ExclamationIcon,
     PlayIcon,
-    RefreshIcon,
     StopIcon,
     SupportIcon
 } from '@heroicons/vue/outline'
 
+import { AnimIconInstalling, AnimIconRestarting, AnimIconStarting } from './icons-animated/index.js'
+
 export default {
     name: 'StatusBadge',
     components: {
-        CloudDownloadIcon,
         CloudUploadIcon,
-        DotsCircleHorizontalIcon,
-        DownloadIcon,
         ExclamationCircleIcon,
         ExclamationIcon,
         PlayIcon,
-        RefreshIcon,
         StopIcon,
-        SupportIcon
+        SupportIcon,
+        AnimIconInstalling,
+        AnimIconRestarting,
+        AnimIconStarting
     },
     props: {
         status: {

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>

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>

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: currentColor;
+    color: currentColor;
+    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: currentColor;
+    color: currentColor;
+    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: currentColor;
+    color: currentColor;
+    animation: ff-icon-starting var(--anim-time) infinite alternate;
+    animation-delay: var(--anim-time);
+}
+
+@keyframes ff-icon-starting {
+  0% {
+    background-color: currentColor;
+  }
+  50%, 100% {
+    background-color: rgba($ff-grey-500, 0.2);
+  }
+}
+</style>

frontend/src/components/icons-animated/index.js

@@ -0,0 +1,9 @@
+import AnimIconInstalling from './Installing.vue'
+import AnimIconRestarting from './Restarting.vue'
+import AnimIconStarting from './Starting.vue'
+
+export {
+    AnimIconRestarting,
+    AnimIconStarting,
+    AnimIconInstalling
+}