Show indeterminate status on task progress bar (#252)

Author: kyasbal

web/src/app/dialogs/startup/startup.component.html

@@ -121,34 +121,44 @@ <h1>Kubernetes History Inspector</h1>
                             >
                           </p>
                           <div class="progress-container">
-                            <p
-                              class="progress-header"
-                              *ngIf="task.progresses.length > 0"
-                            >
-                              {{ task.progresses.length }} concurrent sub tasks
-                              are running ({{
-                                task.totalProgress.percentageLabel
-                              }}):
-                            </p>
-                            <div
-                              class="progress-element"
-                              *ngFor="
-                                let progress of task.progresses;
-                                trackBy: progressCollectionTrack
-                              "
-                            >
-                              <div class="progress-label">
-                                <p class="progress-label-inner">
-                                  {{ progress.label }}({{
-                                    progress.percentageLabel
-                                  }}%) {{ progress.message }}
-                                </p>
-                              </div>
-                              <div
-                                class="progress-bar"
-                                [style.width.%]="progress.percentage"
-                              ></div>
-                            </div>
+                            @if (task.progresses.length > 0) {
+                              <p class="progress-header">
+                                {{ task.progresses.length }} concurrent sub
+                                tasks are running ({{
+                                  task.totalProgress.percentageLabel
+                                }}):
+                              </p>
+                            }
+                            @for (
+                              progress of task.progresses;
+                              track progressCollectionTrack($index, progress)
+                            ) {
+                              @if (progress.indeterminate) {
+                                <div class="progress-element">
+                                  <div class="indeterminate-progress-bar"></div>
+                                  <div class="progress-label">
+                                    <p class="progress-label-inner">
+                                      {{ progress.label }}
+                                      {{ progress.message }}
+                                    </p>
+                                  </div>
+                                </div>
+                              } @else {
+                                <div class="progress-element">
+                                  <div class="progress-label">
+                                    <p class="progress-label-inner">
+                                      {{ progress.label }}({{
+                                        progress.percentageLabel
+                                      }}%) {{ progress.message }}
+                                    </p>
+                                  </div>
+                                  <div
+                                    class="progress-bar"
+                                    [style.width.%]="progress.percentage"
+                                  ></div>
+                                </div>
+                              }
+                            }
                           </div>
                           <div class="error-container">
                             <p class="error" *ngFor="let err of task.errors">

web/src/app/dialogs/startup/startup.component.scss

@@ -15,6 +15,15 @@
  */
 @use "sass:color";
 
+@keyframes indeterminate-progress-animation {
+  0% {
+    transform: translateX(-100%);
+  }
+  100% {
+    transform: translateX(200%);
+  }
+}
+
 .background {
   pointer-events: all;
   border-radius: 20px;
@@ -410,6 +419,30 @@
         background-color: #3f51b5;
         height: 10px;
       }
+
+      .indeterminate-progress-bar {
+        height: 10px;
+        background-color: #3f51b5;
+        width: 100%;
+        position: relative;
+        overflow: hidden;
+
+        &::after {
+          content: "";
+          position: absolute;
+          top: 0;
+          left: 0;
+          height: 100%;
+          width: 50%;
+          background: linear-gradient(
+            90deg,
+            rgba(255, 255, 255, 0) 0%,
+            rgba(255, 255, 255, 0.4) 50%,
+            rgba(255, 255, 255, 0) 100%
+          );
+          animation: indeterminate-progress-animation 1.5s infinite linear;
+        }
+      }
     }
   }
 

web/src/app/dialogs/startup/startup.component.ts

@@ -56,6 +56,7 @@ export type ProgressBarViewModel = {
   message: string;
   percentage: number;
   percentageLabel: string;
+  indeterminate: boolean;
 };
 
 export type ErrorViewModel = {
@@ -144,6 +145,7 @@ export class StartupDialogComponent {
                 message: p.message,
                 percentage: p.percentage * 100,
                 percentageLabel: (p.percentage * 100).toFixed(2),
+                indeterminate: p.indeterminate,
               }) as ProgressBarViewModel,
           ),
           inspectionTimeLabel: this.durationToTimeSeconds(