diff --git a/src/plus/webviews/timeline/timelineWebview.ts b/src/plus/webviews/timeline/timelineWebview.ts index f5e5911..2d9d21b 100644 --- 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() { diff --git a/src/webviews/apps/plus/timeline/timeline.html b/src/webviews/apps/plus/timeline/timeline.html index 83ddeb1..b85318f 100644 --- a/src/webviews/apps/plus/timeline/timeline.html +++ b/src/webviews/apps/plus/timeline/timeline.html @@ -11,6 +11,7 @@
+

diff --git a/src/webviews/apps/plus/timeline/timeline.ts b/src/webviews/apps/plus/timeline/timeline.ts index 05257f4..0a83bdc 100644 --- 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 { 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'); } } diff --git a/src/webviews/apps/shared/components/progress.ts b/src/webviews/apps/shared/components/progress.ts index 9ae8164..440ef4a 100644 --- 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'; }