[ui] jobs' progress bar can also be indefinite

webui/src/components/layout/Jobs.svelte

@@ -47,9 +47,7 @@
 {#each activeJobs as job (job.id)}
   <div class="job" transition:fade>
     <div class="job-label">{job.title}</div>
-    <ProgessBar value={job.progress}>
-      {Math.round(job.progress)}%
-    </ProgessBar>
+    <ProgessBar value={job.progress} />
   </div>
 {/each}
 

webui/src/components/utils/ProgessBar.svelte

@@ -1,12 +1,18 @@
 <script lang="ts">
-  export let value: number;
+  export let value: number | undefined = undefined;
 </script>
 
-<div class="progress-bar" style="--value: {value}%">
+<div
+  class="progress-bar"
+  class:indeterminate={value == undefined}
+  style="--value: {value}%"
+>
   <div class="value" />
   <div class="label">
     <slot>
-      {value}%
+      {#if value}
+        {Math.round(value)}%
+      {/if}
     </slot>
   </div>
 </div>
@@ -22,7 +28,7 @@
   .value {
     background: var(--primary);
     height: 100%;
-    width: var(--value);
+    width: var(--value, 100%);
     transition: width 0.2s ease;
   }
 
@@ -43,4 +49,25 @@
     font-weight: bold;
     mix-blend-mode: difference;
   }
+
+  .progress-bar.indeterminate {
+    .value {
+      animation-name: indeterminate;
+      animation-duration: 2s;
+      animation-iteration-count: infinite;
+      animation-timing-function: ease-in-out;
+    }
+  }
+
+  @keyframes indeterminate {
+    0% {
+      background-color: var(--primary);
+    }
+    50% {
+      background-color: var(--primary-lighter);
+    }
+    100% {
+      background-color: var(--primary);
+    }
+  }
 </style>

webui/src/styles/colors-app.scss

@@ -1,4 +1,5 @@
 @use "colors";
+@use "sass:color";
 
 @mixin rebase(
   $rebase03,
@@ -16,6 +17,7 @@
   --background: #{$rebase03};
   --background-lighter: #{$rebase02};
   --primary: #{colors.$blue};
+  --primary-lighter: #{color.adjust(colors.$blue, $lightness: 25%)};
 
   background-color: $rebase03;
   color: $rebase0;