feat: indeterminate progress bar

packages/renderer/src/lib/task-manager/ProgressBar.spec.ts

@@ -0,0 +1,38 @@
+/**********************************************************************
+ * Copyright (C) 2023 Red Hat, Inc.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ *
+ * SPDX-License-Identifier: Apache-2.0
+ ***********************************************************************/
+
+import '@testing-library/jest-dom/vitest';
+import { test, expect } from 'vitest';
+import { render, screen } from '@testing-library/svelte';
+import ProgressBar from '/@/lib/task-manager/ProgressBar.svelte';
+
+test('Expect that the progress bar is indeterminate', async () => {
+  render(ProgressBar, { progress: undefined });
+
+  // expect the progress bar to have the indeterminate class
+  const progressBar = screen.getByRole('progressbar');
+  expect(progressBar).toHaveClass('progress-bar-indeterminate');
+});
+
+test('Expect that the progress bar is not indeterminate', async () => {
+  render(ProgressBar, { progress: 5 });
+
+  // expect the progress bar to not have the indeterminate class
+  const progressBar = screen.getByRole('progressbar');
+  expect(progressBar.classList.contains('progress-bar-indeterminate')).toBe(false);
+});

packages/renderer/src/lib/task-manager/ProgressBar.svelte

@@ -0,0 +1,35 @@
+<style>
+.progress-bar-indeterminate {
+  background-color: rgb(109 72 191);
+  animation: indeterminateAnimation 1s infinite linear;
+  transform-origin: 0% 50%;
+}
+@keyframes indeterminateAnimation {
+  0% {
+    transform: translateX(0) scaleX(0);
+  }
+  40% {
+    transform: translateX(0) scaleX(0.4);
+  }
+  100% {
+    transform: translateX(100%) scaleX(0.5);
+  }
+}
+</style>
+
+<script lang="ts">
+export let progress: number | undefined;
+</script>
+
+<div class="w-32">
+  <div class="w-full h-4 mb-4 rounded-full bg-gray-900 progress-bar overflow-hidden">
+    {#if progress !== undefined}
+      <div class="h-4 bg-purple-500 rounded-full" role="progressbar" style="width {progress}%"></div>
+    {:else}
+      <div class="h-4 bg-purple-500 rounded-full progress-bar-indeterminate" role="progressbar"></div>
+    {/if}
+  </div>
+</div>
+{#if progress !== undefined}
+  <div class="ml-2 text-xs">{progress}%</div>
+{/if}

packages/renderer/src/lib/task-manager/TaskManagerItem.svelte

@@ -11,6 +11,7 @@ import Fa from 'svelte-fa/src/fa.svelte';
 import { TaskManager, type TaskUI } from './task-manager';
 import { removeTask } from '/@/stores/tasks';
 import type { Task } from '../../../../main/src/plugin/api/task';
+import ProgressBar from '/@/lib/task-manager/ProgressBar.svelte';
 
 export let task: Task;
 
@@ -79,12 +80,7 @@ function gotoTask(taskUI: TaskUI) {
     {#if taskUI.status === 'in-progress'}
       <div class="flex flex-row w-full">
         {#if (taskUI.progress || 0) >= 0}
-          <div class="w-32">
-            <div class="w-full h-4 mb-4 rounded-full bg-gray-900">
-              <div class="h-4 bg-purple-500 rounded-full" style="width: {taskUI.progress}%"></div>
-            </div>
-          </div>
-          <div class="ml-2 text-xs">{taskUI.progress}%</div>
+          <ProgressBar progress="{taskUI.progress}" />
         {/if}
         <div class="flex flex-1 flex-col w-full items-end text-purple-500 text-xs">
           {#if taskUI.hasGotoTask}