Improves timeline performance and interactions

eamodio · eamodio · commit 72f79324a03d · 2025-05-07T02:06:51.000-04:00
- Adds new loading and empty states
 - Refines selecting and opening data points
diff --git a/src/webviews/apps/plus/timeline/components/chart.css.ts b/src/webviews/apps/plus/timeline/components/chart.css.ts
@@ -6,6 +6,7 @@ export const timelineChartStyles = css`
 		flex-direction: column;
 		width: 100%;
 		height: 100%;
+		position: relative;
 
 		--scroller-track-top: unset;
 		--scroller-track-left: 0;
@@ -357,12 +358,45 @@ export const timelineChartStyles = css`
 		cursor: pointer;
 	}
 
-	.empty {
-		padding: 0.4rem 2rem 1.3rem 2rem;
+	@keyframes fadeIn {
+		from {
+			opacity: 0;
+		}
+		to {
+			opacity: 1;
+		}
+	}
+
+	.notice {
+		position: absolute;
+		top: 0;
+		left: 0;
+		bottom: 0;
+		right: 0;
+		display: flex;
+		flex-direction: column;
+		align-items: center;
+		justify-content: center;
+		padding: 10% 2rem 30% 2rem;
 		font-size: var(--font-size);
+
+		z-index: 1;
+	}
+
+	.notice--blur {
+		backdrop-filter: blur(15px);
+		-webkit-backdrop-filter: blur(15px);
+
+		animation: fadeIn 0.3s ease-in;
+		animation-fill-mode: forwards;
+		opacity: 0;
+	}
+
+	:host-context(:host[placement='view']) .notice--blur {
+		animation-delay: 0.5s;
 	}
 
-	.empty p {
+	.notice p {
 		margin-top: 0;
 	}
 
diff --git a/src/webviews/apps/plus/timeline/components/chart.ts b/src/webviews/apps/plus/timeline/components/chart.ts
@@ -8,7 +8,7 @@ import { log } from '../../../../../system/decorators/log';
 import { debounce } from '../../../../../system/function/debounce';
 import { defer } from '../../../../../system/promise';
 import { pluralize, truncateMiddle } from '../../../../../system/string';
-import type { Commit, State, TimelineSliceBy } from '../../../../plus/timeline/protocol';
+import type { State, TimelineDatum, TimelineSliceBy } from '../../../../plus/timeline/protocol';
 import { renderCommitSha } from '../../../shared/components/commit-sha';
 import { GlElement } from '../../../shared/components/element';
 import { createFromDateDelta, formatDate, fromNow } from '../../../shared/date';
@@ -17,6 +17,7 @@ import type { SliderChangeEventDetail } from './slider';
 import { GlChartSlider } from './slider';
 import '@shoelace-style/shoelace/dist/components/resize-observer/resize-observer.js';
 import './scroller';
+import '../../../shared/components/indicators/watermark-loader';
 
 export const tagName = 'gl-timeline-chart';
 
@@ -51,8 +52,9 @@ export class GlTimelineChart extends GlElement {
 		}
 	>();
 	private readonly _slicesByIndex = new Map<number, string>();
-	private readonly _commitsByTimestamp = new Map<number, Commit>();
+	private readonly _commitsByTimestamp = new Map<number, TimelineDatum>();
 
+	@state()
 	private _loading?: ReturnType<typeof defer<void>>;
 
 	private get compact(): boolean {
@@ -166,24 +168,29 @@ export class GlTimelineChart extends GlElement {
 	}
 
 	protected override render(): unknown {
-		// Don't render anything if the data is still loading
-		if (this.data === null) return nothing;
-		if (!this.data?.length) {
-			return html`<div class="empty"><p>No commits found for the specified time period.</p></div>`;
-		}
-
-		return html`<gl-chart-scroller
-			.range=${this._rangeScrollable}
-			.visibleRange=${this._zoomedRangeScrollable}
-			@gl-scroll=${this.onScroll}
-			@gl-scroll-start=${this.onScrollStart}
-			@gl-scroll-end=${this.onScrollEnd}
-		>
-			<sl-resize-observer @sl-resize=${this.onResize}>
-				<div id="chart" tabindex="-1"></div>
-			</sl-resize-observer>
-			${this.renderFooter()}
-		</gl-chart-scroller>`;
+		return html`${this._loading?.pending
+				? html`<div class="notice notice--blur">
+						<gl-watermark-loader pulse><p>Loading...</p></gl-watermark-loader>
+				  </div>`
+				: !this.data?.length
+				  ? html`<div class="notice">
+							<gl-watermark-loader
+								><p>No commits found for the specified time period</p></gl-watermark-loader
+							>
+				    </div>`
+				  : nothing}
+			<gl-chart-scroller
+				.range=${this._rangeScrollable}
+				.visibleRange=${this._zoomedRangeScrollable}
+				@gl-scroll=${this.onScroll}
+				@gl-scroll-start=${this.onScrollStart}
+				@gl-scroll-end=${this.onScrollEnd}
+			>
+				<sl-resize-observer @sl-resize=${this.onResize}>
+					<div id="chart" tabindex="-1"></div>
+				</sl-resize-observer>
+				${this.data?.length ? this.renderFooter() : nothing}
+			</gl-chart-scroller>`;
 	}
 
 	private renderFooter() {
@@ -442,7 +449,7 @@ export class GlTimelineChart extends GlElement {
 		return result;
 	}
 
-	private calculateChangeMetrics(dataset: Commit[]): { q1: number; q3: number; maxChanges: number } {
+	private calculateChangeMetrics(dataset: TimelineDatum[]): { q1: number; q3: number; maxChanges: number } {
 		const sortedChanges = dataset.map(c => (c.additions ?? 0) + (c.deletions ?? 0)).sort((a, b) => a - b);
 		return {
 			maxChanges: sortedChanges[sortedChanges.length - 1],
@@ -511,7 +518,7 @@ export class GlTimelineChart extends GlElement {
 
 	@log<GlTimelineChart['prepareChartData']>({ args: { 0: d => d?.length } })
 	private prepareChartData(
-		dataset: Commit[],
+		dataset: TimelineDatum[],
 		metrics: { minRadius: number; maxRadius: number; q1: number; q3: number; maxChanges: number },
 	): PreparedChartData {
 		const commits = dataset.length + 1;
@@ -601,24 +608,18 @@ export class GlTimelineChart extends GlElement {
 		const abortController = this._abortController;
 
 		const loading = defer<void>();
+		void loading.promise.finally(() => (this._loading = undefined));
+
 		this._loading = loading;
 		this.emit('gl-loading', loading.promise);
 
-		const data = await dataPromise;
+		const data = (await dataPromise) ?? [];
 
 		if (abortController?.signal.aborted) {
 			loading?.cancel();
 			return;
 		}
 
-		if (!data?.length) {
-			this._chart?.destroy();
-			this._chart = undefined;
-
-			loading?.fulfill();
-			return;
-		}
-
 		// Clear previous state
 		this._slices.clear();
 		this._slicesByIndex.clear();
@@ -639,7 +640,9 @@ export class GlTimelineChart extends GlElement {
 			return;
 		}
 
-		this.range = [new Date(data[data.length - 1].date), new Date(data[0].date)];
+		this.range = data.length
+			? [new Date(data[data.length - 1].date), new Date(data[0].date)]
+			: [new Date(), new Date()];
 
 		// Initialize plugins
 		bar();
@@ -657,7 +660,7 @@ export class GlTimelineChart extends GlElement {
 
 					onafterinit: () => {
 						this.updateChartSize();
-						setTimeout(() => loading?.fulfill(), 250);
+						setTimeout(() => loading?.fulfill(), 0);
 					},
 					onrendered: this.getOnRenderedCallback(this),
 					// Restore the zoomed domain when the chart is resized, because it gets lost
@@ -830,9 +833,11 @@ export class GlTimelineChart extends GlElement {
 
 				const commit = data[0];
 				this._shaHovered = undefined;
-				this._shaSelected = commit.sha;
+				this._shaSelected = commit?.sha;
 
-				this.selectDataPoint(new Date(commit.date), { select: true });
+				if (commit != null) {
+					this.selectDataPoint(new Date(commit.date), { select: true });
+				}
 			} else {
 				this._chart.config('axis.y.tick.values', yTickValues, false);
 				this._chart.config('axis.y.min', minY, false);
@@ -849,11 +854,14 @@ export class GlTimelineChart extends GlElement {
 						if (commit == null) {
 							commit = data[0];
 							this._shaHovered = undefined;
-							this._shaSelected = commit.sha;
+							this._shaSelected = commit?.sha;
+						}
+
+						if (commit != null) {
+							this.selectDataPoint(new Date(commit.date), { select: true });
 						}
-						this.selectDataPoint(new Date(commit.date), { select: true });
 
-						setTimeout(() => loading?.fulfill(), 250);
+						setTimeout(() => loading?.fulfill(), 0);
 					},
 				});
 			}
diff --git a/src/webviews/apps/plus/timeline/components/slider.ts b/src/webviews/apps/plus/timeline/components/slider.ts
@@ -3,7 +3,7 @@ import type { PropertyValues } from 'lit';
 import { css, html } from 'lit';
 import { customElement, property, query, state } from 'lit/decorators.js';
 import { isUncommitted, isUncommittedStaged, shortenRevision } from '../../../../../git/utils/revision.utils';
-import type { Commit } from '../../../../plus/timeline/protocol';
+import type { TimelineDatum } from '../../../../plus/timeline/protocol';
 import { GlElement } from '../../../shared/components/element';
 import '@shoelace-style/shoelace/dist/components/range/range.js';
 
@@ -40,12 +40,12 @@ export class GlChartSlider extends GlElement {
 	private _max: number = 0;
 	private _min: number = 0;
 
-	private _data: Commit[] | undefined;
+	private _data: TimelineDatum[] | undefined;
 	get data() {
 		return this._data;
 	}
 	@property({ type: Array })
-	set data(value: Commit[] | undefined) {
+	set data(value: TimelineDatum[] | undefined) {
 		if (this._data === value) return;
 
 		this._data = value;
diff --git a/src/webviews/apps/plus/timeline/timeline.ts b/src/webviews/apps/plus/timeline/timeline.ts
@@ -393,10 +393,11 @@ export class GlTimelineApp extends GlApp<State> {
 
 	private _fireSelectDataPointDebounced: Deferrable<(e: CommitEventDetail) => void> | undefined;
 	private fireSelectDataPoint(e: CommitEventDetail) {
+		const { itemType } = this;
 		this._fireSelectDataPointDebounced ??= debounce(
-			(e: CommitEventDetail) => this._ipc.sendCommand(SelectDataPointCommand, e),
-			150,
-			{ maxWait: 250 },
+			(e: CommitEventDetail) => this._ipc.sendCommand(SelectDataPointCommand, { itemType: itemType, ...e }),
+			250,
+			{ maxWait: itemType === 'file' ? 500 : undefined },
 		);
 		this._fireSelectDataPointDebounced(e);
 	}
diff --git a/src/webviews/apps/shared/components/indicators/watermark-loader.css.ts b/src/webviews/apps/shared/components/indicators/watermark-loader.css.ts
@@ -0,0 +1,76 @@
+import { css } from 'lit';
+
+export const baseStyles = css`
+	.container {
+		display: flex;
+		flex-direction: column;
+		align-items: center;
+		justify-content: center;
+		margin: auto;
+		position: absolute;
+		top: 5%;
+		bottom: 45%;
+		left: 0;
+		right: 0;
+	}
+
+	::slotted(p) {
+		padding-top: 1rem;
+		color: var(--color-foreground--75);
+		font-size: 1.4rem;
+	}
+
+	.watermark {
+		width: 12rem;
+		height: 12rem;
+		fill: color-mix(in srgb, var(--color-foreground) 15%, var(--color-background));
+		transform-origin: center;
+	}
+`;
+
+export const pulseStyles = css`
+	@keyframes pulse {
+		0% {
+			transform: scale(0.9);
+		}
+		50% {
+			transform: scale(1.05);
+		}
+		100% {
+			transform: scale(0.9);
+		}
+	}
+
+	.watermark--pulse .watermark-path {
+		transform: scale(0.9);
+		animation: pulse 1.8s ease-in-out infinite;
+		transform-origin: center;
+	}
+
+	/* Stagger the pulse animation for a wave effect on all paths */
+	/* Targeting all paths using their order within the SVG */
+	.watermark-path:nth-of-type(1) {
+		/* Target the outer circle path */
+		animation-delay: 0.2s;
+	}
+
+	.watermark-path:nth-of-type(2) {
+		/* Target the connection path */
+		animation-delay: 0.4s;
+	}
+
+	.watermark-path:nth-of-type(3) {
+		/* Target the first dot path */
+		animation-delay: 0.1s;
+	}
+
+	.watermark-path:nth-of-type(4) {
+		/* Target the second dot path */
+		animation-delay: 0.1s;
+	}
+
+	.watermark-path:nth-of-type(5) {
+		/* Target the third dot path */
+		animation-delay: 0.1s;
+	}
+`;
diff --git a/src/webviews/apps/shared/components/indicators/watermark-loader.ts b/src/webviews/apps/shared/components/indicators/watermark-loader.ts
@@ -0,0 +1,42 @@
+import { html, LitElement } from 'lit';
+import { customElement, property } from 'lit/decorators.js';
+import { baseStyles, pulseStyles } from './watermark-loader.css';
+
+export const tagName = 'gl-watermark-loader';
+
+@customElement(tagName)
+export class GlWatermarkLoader extends LitElement {
+	static override styles = [baseStyles, pulseStyles];
+
+	@property({ type: Boolean })
+	pulse = false;
+
+	override render(): unknown {
+		return html`<div class="container">
+			<svg
+				class="watermark${this.pulse ? ' watermark--pulse' : ''}"
+				viewBox="0 0 28 28"
+				xmlns="http://www.w3.org/2000/svg"
+			>
+				<path
+					class="watermark-path"
+					d="M14 3.25C12.5883 3.25 11.1904 3.52806 9.88615 4.0683C8.5819 4.60853 7.39683 5.40037 6.3986 6.3986C5.40037 7.39683 4.60853 8.5819 4.06829 9.88615C3.52806 11.1904 3.25 12.5883 3.25 14C3.25 15.4117 3.52806 16.8096 4.06829 18.1138C4.60853 19.4181 5.40037 20.6032 6.3986 21.6014C7.39683 22.5996 8.5819 23.3915 9.88615 23.9317C11.1904 24.4719 12.5883 24.75 14 24.75C16.8511 24.75 19.5854 23.6174 21.6014 21.6014C23.6174 19.5854 24.75 16.8511 24.75 14C24.75 11.1489 23.6174 8.41462 21.6014 6.3986C19.5854 4.38259 16.8511 3.25 14 3.25ZM2 14C2 10.8174 3.26428 7.76516 5.51472 5.51472C7.76516 3.26428 10.8174 2 14 2C17.1826 2 20.2348 3.26428 22.4853 5.51472C24.7357 7.76516 26 10.8174 26 14C26 17.1826 24.7357 20.2348 22.4853 22.4853C20.2348 24.7357 17.1826 26 14 26C10.8174 26 7.76516 24.7357 5.51472 22.4853C3.26428 20.2348 2 17.1826 2 14Z"
+				/>
+				<path class="watermark-path" d="M18 15L11.5 8.5L12.5 7.5L19 14L18 15ZM11.5 20V8H13V20H11.5Z" />
+				<path
+					class="watermark-path"
+					d="M12.25 10.5C12.8467 10.5 13.419 10.2629 13.841 9.84099C14.2629 9.41903 14.5 8.84674 14.5 8.25C14.5 7.65326 14.2629 7.08097 13.841 6.65901C13.419 6.23705 12.8467 6 12.25 6C11.6533 6 11.081 6.23705 10.659 6.65901C10.2371 7.08097 10 7.65326 10 8.25C10 8.84674 10.2371 9.41903 10.659 9.84099C11.081 10.2629 11.6533 10.5 12.25 10.5Z"
+				/>
+				<path
+					class="watermark-path"
+					d="M18.25 16.5C18.5455 16.5 18.8381 16.4418 19.111 16.3287C19.384 16.2157 19.6321 16.0499 19.841 15.841C20.0499 15.6321 20.2157 15.384 20.3287 15.111C20.4418 14.8381 20.5 14.5455 20.5 14.25C20.5 13.9545 20.4418 13.6619 20.3287 13.389C20.2157 13.116 20.0499 12.8679 19.841 12.659C19.6321 12.4501 19.384 12.2843 19.111 12.1713C18.8381 12.0582 18.5455 12 18.25 12C17.6533 12 17.081 12.2371 16.659 12.659C16.2371 13.081 16 13.6533 16 14.25C16 14.8467 16.2371 15.419 16.659 15.841C17.081 16.2629 17.6533 16.5 18.25 16.5Z"
+				/>
+				<path
+					class="watermark-path"
+					d="M12.25 22C12.8467 22 13.419 21.7629 13.841 21.341C14.2629 20.919 14.5 20.3467 14.5 19.75C14.5 19.1533 14.2629 18.581 13.841 18.159C13.419 17.7371 12.8467 17.5 12.25 17.5C11.6533 17.5 11.081 17.7371 10.659 18.159C10.2371 18.581 10 19.1533 10 19.75C10 20.3467 10.2371 20.919 10.659 21.341C11.081 21.7629 11.6533 22 12.25 22Z"
+				/>
+			</svg>
+			<slot></slot>
+		</div>`;
+	}
+}
diff --git a/src/webviews/plus/timeline/protocol.ts b/src/webviews/plus/timeline/protocol.ts
diff --git a/src/webviews/plus/timeline/timelineWebview.ts b/src/webviews/plus/timeline/timelineWebview.ts
