Add determinate progress ring

Author: koesie10

extensions/ql-vscode/src/view/common/DeterminateProgressRing.tsx

@@ -0,0 +1,60 @@
+import * as React from "react";
+import styled from "styled-components";
+
+type Props = {
+  percent: number;
+  label?: string;
+};
+
+const Circle = styled.div`
+  width: 16px;
+  height: 16px;
+`;
+
+const Background = styled.circle`
+  stroke: var(--vscode-editorWidget-background);
+  fill: none;
+  stroke-width: 2px;
+`;
+
+const Determinate = styled.circle`
+  stroke: var(--vscode-progressBar-background);
+  fill: none;
+  stroke-width: 2px;
+  stroke-linecap: round;
+  transform-origin: 50% 50%;
+  transform: rotate(-90deg);
+  transition: all 0.2s ease-in-out 0s;
+`;
+
+const progressSegments = 44;
+
+// This is a re-implementation of the FAST component progress ring
+// See https://github.com/microsoft/fast/blob/21c210f2164c5cf285cade1a328460c67e4b97e6/packages/web-components/fast-foundation/src/progress-ring/progress-ring.template.ts
+// Once the determinate progress ring is available in the VSCode webview UI toolkit, we should use that instead
+
+export const DeterminateProgressRing = ({
+  percent,
+  label = "Loading...",
+}: Props) => (
+  <Circle
+    role="progressbar"
+    aria-valuemin={0}
+    aria-valuemax={100}
+    aria-valuenow={percent}
+  >
+    <svg className="progress" viewBox="0 0 16 16">
+      <Background cx="8px" cy="8px" r="7px" />
+      <Determinate
+        style={{
+          strokeDasharray: `${
+            (progressSegments * percent) / 100
+          }px ${progressSegments}px`,
+        }}
+        cx="8px"
+        cy="8px"
+        r="7px"
+      ></Determinate>
+    </svg>
+  </Circle>
+);

extensions/ql-vscode/src/view/variant-analysis/RepoRow.tsx

@@ -26,6 +26,7 @@ import { AnalyzedRepoItemContent } from "./AnalyzedRepoItemContent";
 import StarCount from "../common/StarCount";
 import { LastUpdated } from "../common/LastUpdated";
 import { useTelemetryOnChange } from "../common/telemetry";
+import { DeterminateProgressRing } from "../common/DeterminateProgressRing";
 
 // This will ensure that these icons have a className which we can use in the TitleContainer
 const ExpandCollapseCodicon = styled(Codicon)``;
@@ -284,12 +285,8 @@ export const RepoRow = ({
         </span>
         {downloadState?.downloadStatus ===
           VariantAnalysisScannedRepositoryDownloadStatus.InProgress && (
-          <LoadingIcon
-            label={
-              downloadState.downloadPercentage !== undefined
-                ? `Downloading: ${downloadState.downloadPercentage}%`
-                : "Downloading"
-            }
+          <DeterminateProgressRing
+            percent={downloadState.downloadPercentage ?? 0}
           />
         )}
         {downloadState?.downloadStatus ===