Adds progess indicator to pane headers

Shows progress indicator while loading autolinks

src/webviews/apps/commitDetails/commitDetails.ts

@@ -31,6 +31,7 @@ import '../shared/components/rich/issue-pull-request';
 import '../shared/components/skeleton-loader';
 import '../shared/components/commit/commit-stats';
 import '../shared/components/webview-pane';
+import '../shared/components/progress';
 import '../shared/components/list/list-container';
 import '../shared/components/list/list-item';
 import '../shared/components/list/file-change-list-item';
@@ -506,6 +507,7 @@ export class CommitDetailsApp extends App> {
 		}
 
 		$el.expanded = this.state.preferences?.autolinksExpanded ?? true;
+		$el.loading = !state.includeRichContent;
 
 		const $info = $el.querySelector('[data-region="rich-info"]');
 		const $autolinks = $el.querySelector('[data-region="autolinks"]');

src/webviews/apps/shared/components/progress.ts

@@ -0,0 +1,76 @@
+import { attr, css, customElement, FASTElement, html } from '@microsoft/fast-element';
+
+const template = html<ProgressIndicator>`
+	<template class="${x => x.mode}${x => (x.active ? ' active' : '')}" role="progressbar">
+		<div class="progress-bar"></div>
+	</template>
+`;
+
+const styles = css`
+	* {
+		box-sizing: border-box;
+	}
+
+	:host {
+		position: absolute;
+		left: 0;
+		bottom: 0;
+		z-index: 5;
+		height: 2px;
+		width: 100%;
+		overflow: hidden;
+	}
+
+	.progress-bar {
+		background-color: var(--vscode-progressBar-background);
+		display: none;
+		position: absolute;
+		left: 0;
+		width: 2%;
+		height: 2px;
+	}
+
+	:host(.active) .progress-bar {
+		display: inherit;
+	}
+
+	:host(.discrete) .progress-bar {
+		left: 0;
+		transition: width 0.1s linear;
+	}
+
+	:host(.discrete.done) .progress-bar {
+		width: 100%;
+	}
+
+	:host(.infinite) .progress-bar {
+		animation-name: progress;
+		animation-duration: 4s;
+		animation-iteration-count: infinite;
+		animation-timing-function: steps(100);
+		transform: translateZ(0);
+	}
+
+	@keyframes progress {
+		0% {
+			transform: translateX(0) scaleX(1);
+		}
+
+		50% {
+			transform: translateX(2500%) scaleX(3);
+		}
+
+		to {
+			transform: translateX(4900%) scaleX(1);
+		}
+	}
+`;
+
+@customElement({ name: 'progress-indicator', template: template, styles: styles })
+export class ProgressIndicator extends FASTElement {
+	@attr({ mode: 'reflect' })
+	mode = 'infinite';
+
+	@attr({ mode: 'boolean' })
+	active = false;
+}

src/webviews/apps/shared/components/webview-pane.ts

@@ -25,6 +25,7 @@ export class WebviewPane extends LitElement {
 			background-color: var(--vscode-sideBarSectionHeader-background);
 			color: var(--vscode-sideBarSectionHeader-foreground);
 			border-top: 1px solid var(--vscode-sideBarSectionHeader-border);
+			position: relative;
 		}
 
 		.header:focus-within {
@@ -88,6 +89,9 @@ export class WebviewPane extends LitElement {
 	@property({ type: Boolean, reflect: true })
 	expanded = false;
 
+	@property({ type: Boolean, reflect: true })
+	loading = false;
+
 	renderTitle() {
 		if (!this.collapsable) {
 			return html`<div class="label">
@@ -110,7 +114,10 @@ export class WebviewPane extends LitElement {
 
 	override render() {
 		return html`
-			<header class="header">${this.renderTitle()}</header>
+			<header class="header">
+				${this.renderTitle()}
+				<progress-indicator active="${this.loading}"></progress-indicator>
+			</header>
 			<div id="content" role="region" class="content">
 				<slot></slot>
 			</div>