Updates loading states on home sections

Author: d13

src/webviews/apps/plus/home/components/active-work.ts

@@ -11,6 +11,7 @@ import { stateContext } from '../../../home/context';
 import { ipcContext } from '../../../shared/context';
 import type { HostIpc } from '../../../shared/ipc';
 import { linkStyles } from '../../shared/components/vscode.css';
+import { branchCardStyles, createCommandLink } from './branch-section';
 import type { Overview, OverviewState } from './overviewState';
 import { overviewStateContext } from './overviewState';
 import '../../../shared/components/button';
@@ -31,7 +32,6 @@ export class GlActiveWork extends SignalWatcher(LitElement) {
 	static override styles = [
 		linkStyles,
 		branchCardStyles,
-		headingLoaderStyles,
 		css`
 			[hidden] {
 				display: none;
@@ -91,7 +91,7 @@ export class GlActiveWork extends SignalWatcher(LitElement) {
 	private renderLoader() {
 		return html`
 			<gl-section>
-				<skeleton-loader slot="heading" class="heading-loader" lines="1"></skeleton-loader>
+				<skeleton-loader slot="heading" lines="1"></skeleton-loader>
 				<skeleton-loader lines="3"></skeleton-loader>
 			</gl-section>
 		`;
@@ -110,7 +110,7 @@ export class GlActiveWork extends SignalWatcher(LitElement) {
 		if (!activeBranches) return html`<span>None</span>`;
 
 		return html`
-			<gl-section>
+			<gl-section ?loading=${isFetching}>
 				<span slot="heading">${this.renderRepositoryIcon(repo.provider)} ${repo.name}</span>
 				<span slot="heading-actions"
 					><gl-button

src/webviews/apps/plus/home/components/branch-section.ts

@@ -7,6 +7,7 @@ import type { GetOverviewBranch, OpenInGraphParams } from '../../../../home/prot
 import { srOnlyStyles } from '../../../shared/components/styles/lit/a11y.css';
 import { linkStyles } from '../../shared/components/vscode.css';
 import '../../../shared/components/code-icon';
+import '../../../shared/components/progress';
 import '../../../shared/components/avatar/avatar';
 import '../../../shared/components/avatar/avatar-list';
 import '../../../shared/components/card/card';
@@ -26,26 +27,50 @@ export class GlSection extends LitElement {
 			.section {
 				margin-bottom: 1.2rem;
 			}
-			.section__heading {
+			.section__header {
+				position: relative;
 				display: flex;
 				justify-content: space-between;
 				gap: 8px;
 				margin-block: 0 0.8rem;
+			}
+			.section__heading {
+				flex: 1;
 				font-size: 1.3rem;
 			}
 			.section__headline {
 				font-weight: normal;
 				text-transform: uppercase;
 			}
+
+			.section__actions {
+				margin-inline-start: auto;
+			}
+
+			.section__loader {
+				position: absolute;
+				left: 0;
+				bottom: 0;
+			}
 		`,
 	];
 
+	@property({ type: Boolean })
+	loading = false;
+
+	@property({ attribute: 'heading-level' })
+	headingLevel: ARIAMixin['ariaLevel'] = '3';
+
 	override render() {
 		return html`
 			<div class="section">
-				<h3 class="section__heading section__heading--actions">
-					<slot name="heading" class="section__headline"></slot><slot name="heading-actions"></slot>
-				</h3>
+				<header class="section__header">
+					<div class="section__heading" role="heading" aria-level=${this.headingLevel}>
+						<slot name="heading" class="section__headline"></slot>
+					</div>
+					<slot name="heading-actions" class="section__actions"></slot>
+					<progress-indicator class="section__loader" ?active="${this.loading}"></progress-indicator>
+				</header>
 				<slot></slot>
 			</div>
 		`;
@@ -69,7 +94,7 @@ export class GlBranchSection extends LitElement {
 
 	override render() {
 		return html`
-			<gl-section>
+			<gl-section ?loading=${this.isFetching}>
 				<span slot="heading">${this.renderSectionLabel()}</span>
 				<span slot="heading-actions"><slot name="heading-actions"></slot></span>
 				${when(

src/webviews/apps/plus/home/components/overview.ts

@@ -65,7 +65,7 @@ export class GlOverview extends SignalWatcher(LitElement) {
 	private renderLoader() {
 		return html`
 			<gl-section>
-				<skeleton-loader slot="heading" class="heading-loader" lines="1"></skeleton-loader>
+				<skeleton-loader slot="heading" lines="1"></skeleton-loader>
 				<skeleton-loader lines="3"></skeleton-loader>
 			</gl-section>
 		`;

src/webviews/apps/shared/components/signal-utils.ts

@@ -1,5 +1,7 @@
 import { signal } from '@lit-labs/signals';
 import { AsyncComputed } from 'signal-utils/async-computed';
+import type { Deferrable } from '../../../../system/function';
+import { debounce } from '../../../../system/function';
 
 export const renderAsyncComputed = <T, R = unknown>(
 	v: AsyncComputed<T>,
@@ -28,11 +30,12 @@ export const renderAsyncComputed = <T, R = unknown>(
 };
 
 export class AsyncComputedState<T, R = unknown> {
+	private _debounce = 500;
 	private _invalidate = signal(0);
 	private _computed?: AsyncComputed<T>;
 	private _state = signal<T | undefined>(undefined);
 	get state() {
-		this.computed.run();
+		this._run();
 		return this._state.get();
 	}
 
@@ -60,21 +63,44 @@ export class AsyncComputedState<T, R = unknown> {
 		options?: {
 			autoRun?: boolean;
 			initial?: T;
+			debounce?: number;
 		},
 	) {
 		if (options != null) {
 			this._state.set(options.initial);
 
+			if (options.debounce != null) {
+				this._debounce = options.debounce;
+			}
+
 			if (options.autoRun === true) {
 				this.run();
 			}
 		}
 	}
+	private _runCore() {
+		this.computed.run();
+	}
+
+	private _runDebounced: Deferrable<() => void> | undefined;
+	protected _run(immediate = false) {
+		if (immediate) {
+			this._runCore();
+			return;
+		}
+
+		if (this._runDebounced == null) {
+			this._runDebounced = debounce(this._runCore.bind(this), this._debounce);
+		}
+
+		this._runDebounced();
+	}
 	run(force = false) {
 		if (force) {
 			this.invalidate();
 		}
-		this.computed.run();
+
+		this._run();
 	}
 
 	invalidate() {