Adds progress indicator to timeline

1 year ago · 27f3556d61
--- a/src/plus/webviews/timeline/timelineWebview.ts
+++ b/src/plus/webviews/timeline/timelineWebview.ts
@ -428,7 +428,7 @@ export class TimelineWebviewProvider implements WebviewProvider {

 		const context = { ...this._context, ...this._pendingContext };

 		return window.withProgress({ location: { viewId: this.host.id } }, async () => {
 		const task = async () => {
 			const success = await this.host.notify(DidChangeNotificationType, {
 				state: await this.getState(context),
 			});
@ -436,7 +436,10 @@ export class TimelineWebviewProvider implements WebviewProvider {
 				this._context = context;
 				this._pendingContext = undefined;
 			}
 		});
 		};

 		if (!this.host.isView()) return task();
 		return window.withProgress({ location: { viewId: this.host.id } }, task);
 	}

 	private openInTab() {
--- a/src/webviews/apps/plus/timeline/timeline.html
+++ b/src/webviews/apps/plus/timeline/timeline.html
@ -11,6 +11,7 @@

 	<body class="preload" data-placement="#{placement}">
 		<div class="container">
 			<progress-indicator id="spinner" position="top" active="true"></progress-indicator>
 			<section class="header">
 				<h2 data-bind="title"></h2>
 				<h2 data-bind="sha"></h2>
--- a/src/webviews/apps/plus/timeline/timeline.ts
+++ b/src/webviews/apps/plus/timeline/timeline.ts
@ -16,6 +16,7 @@ import { DOM } from '../../shared/dom';
 import type { DataPointClickEvent } from './chart';
 import { TimelineChart } from './chart';
 import '../../shared/components/code-icon';
 import '../../shared/components/progress';

 export class TimelineApp extends App<State> {
 	private _chart: TimelineChart | undefined;
@ -87,6 +88,7 @@ export class TimelineApp extends App {

 		this.log(`onPeriodChanged(): name=${element.name}, value=${value}`);

 		this.updateLoading(true);
 		this.sendCommand(UpdatePeriodCommandType, { period: value });
 	}

@ -186,6 +188,11 @@ export class TimelineApp extends App {
 		}

 		this._chart.updateChart(this.state);
 		setTimeout(() => this.updateLoading(false), 250);
 	}

 	private updateLoading(loading: boolean) {
 		document.getElementById('spinner')?.setAttribute('active', loading ? 'true' : 'false');
 	}
 }

--- a/src/webviews/apps/shared/components/progress.ts
+++ b/src/webviews/apps/shared/components/progress.ts
@ -14,13 +14,20 @@ const styles = css`
 	:host {
 		position: absolute;
 		left: 0;
 		bottom: 0;
 		z-index: 5;
 		height: 2px;
 		width: 100%;
 		overflow: hidden;
 	}

 	:host([position='bottom']) {
 		bottom: 0;
 	}

 	:host([position='top']) {
 		top: 0;
 	}

 	.progress-bar {
 		background-color: var(--vscode-progressBar-background);
 		display: none;
@ -73,4 +80,7 @@ export class ProgressIndicator extends FASTElement {

 	@attr({ mode: 'boolean' })
 	active = false;

 	@attr()
 	position: 'top' | 'bottom' = 'bottom';
 }