Improves rendering existing state in home

Author: d13

src/webviews/apps/home/home.ts

@@ -5,7 +5,7 @@ import { html } from 'lit';
 import { customElement, query } from 'lit/decorators.js';
 import { when } from 'lit/directives/when.js';
 import type { State } from '../../home/protocol';
-import { DidChangeOverviewFilter, DidFocusAccount } from '../../home/protocol';
+import { DidFocusAccount } from '../../home/protocol';
 import { OverviewState, overviewStateContext } from '../plus/home/components/overviewState';
 import type { GLHomeAccountContent } from '../plus/shared/components/home-account-content';
 import { GlApp } from '../shared/app';
@@ -51,11 +51,6 @@ export class GlHomeApp extends GlApp<State> {
 				case DidFocusAccount.is(msg):
 					this.accountContentEl.show();
 					break;
-				case DidChangeOverviewFilter.is(msg):
-					this._overviewState.filter.recent = msg.params.filter.recent;
-					this._overviewState.filter.stale = msg.params.filter.stale;
-					this._overviewState.run(true);
-					break;
 			}
 		});
 	}
@@ -81,7 +76,7 @@ export class GlHomeApp extends GlApp<State> {
 							<gl-launchpad></gl-launchpad>
 							<gl-overview></gl-overview>
 						`,
-						() => html` <gl-feature-nav .badgeSource=${this.badgeSource}></gl-feature-nav> `,
+						() => html`<gl-feature-nav .badgeSource=${this.badgeSource}></gl-feature-nav>`,
 					)}
 				</main>
 

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

@@ -49,10 +49,13 @@ export class GlActiveWork extends SignalWatcher(LitElement) {
 	}
 
 	private renderPending() {
-		return html`
-			<h3 class="section-heading">Active</h3>
-			<skeleton-loader lines="3"></skeleton-loader>
-		`;
+		if (this._overviewState.state == null) {
+			return html`
+				<h3 class="section-heading">Active</h3>
+				<skeleton-loader lines="3"></skeleton-loader>
+			`;
+		}
+		return this.renderComplete(this._overviewState.state);
 	}
 
 	private renderComplete(overview: Overview) {

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

@@ -100,8 +100,10 @@ export class GlLaunchpad extends SignalWatcher(LitElement) {
 		return rsp;
 	});
 
-	private get _summary() {
-		return this._summaryState.state.value;
+	override connectedCallback() {
+		super.connectedCallback();
+
+		this._summaryState.run();
 	}
 
 	override disconnectedCallback() {
@@ -123,10 +125,6 @@ export class GlLaunchpad extends SignalWatcher(LitElement) {
 	}
 
 	private renderSummaryResult() {
-		if (this._summary == null) {
-			this._summaryState.run();
-		}
-
 		return this._summaryState.render({
 			pending: () => this.renderPending(),
 			complete: summary => this.renderSummary(summary),
@@ -135,12 +133,15 @@ export class GlLaunchpad extends SignalWatcher(LitElement) {
 	}
 
 	private renderPending() {
-		return html`
-			<div class="loader">
-				<skeleton-loader lines="1"></skeleton-loader>
-				<skeleton-loader lines="1"></skeleton-loader>
-			</div>
-		`;
+		if (this._summaryState.state == null) {
+			return html`
+				<div class="loader">
+					<skeleton-loader lines="1"></skeleton-loader>
+					<skeleton-loader lines="1"></skeleton-loader>
+				</div>
+			`;
+		}
+		return this.renderSummary(this._summaryState.state);
 	}
 
 	private renderSummary(summary: LaunchpadSummary | undefined) {

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

@@ -49,10 +49,13 @@ export class GlOverview extends SignalWatcher(LitElement) {
 	}
 
 	private renderPending() {
-		return html`
-			<h3 class="section-heading">Recent</h3>
-			<skeleton-loader lines="3"></skeleton-loader>
-		`;
+		if (this._overviewState.state == null) {
+			return html`
+				<h3 class="section-heading">Recent</h3>
+				<skeleton-loader lines="3"></skeleton-loader>
+			`;
+		}
+		return this.renderComplete(this._overviewState.state);
 	}
 
 	@consume({ context: ipcContext })

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

@@ -1,7 +1,12 @@
 import { createContext } from '@lit/context';
 import { signalObject } from 'signal-utils/object';
 import type { GetOverviewResponse, OverviewFilters } from '../../../../home/protocol';
-import { DidChangeRepositoryWip, GetOverview, GetOverviewFilterState } from '../../../../home/protocol';
+import {
+	DidChangeOverviewFilter,
+	DidChangeRepositoryWip,
+	GetOverview,
+	GetOverviewFilterState,
+} from '../../../../home/protocol';
 import { AsyncComputedState } from '../../../shared/components/signal-utils';
 import type { Disposable } from '../../../shared/events';
 import type { HostIpc } from '../../../shared/ipc';
@@ -29,6 +34,11 @@ export class OverviewState extends AsyncComputedState<Overview> {
 				case DidChangeRepositoryWip.is(msg):
 					this.run(true);
 					break;
+				case DidChangeOverviewFilter.is(msg):
+					this.filter.recent = msg.params.filter.recent;
+					this.filter.stale = msg.params.filter.stale;
+					this.run(true);
+					break;
 			}
 		});
 		void this._ipc.sendRequest(GetOverviewFilterState, undefined).then(rsp => {

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

@@ -29,17 +29,30 @@ export const renderAsyncComputed = <T, R = unknown>(
 
 export class AsyncComputedState<T, R = unknown> {
 	private _invalidate = signal(0);
-	private _initial?: T;
-	private _state?: AsyncComputed<T>;
+	private _computed?: AsyncComputed<T>;
+	private _state = signal<T | undefined>(undefined);
 	get state() {
-		this._state ??= new AsyncComputed(
-			(abortSignal: AbortSignal) => {
-				this._invalidate.get();
-				return this._fetch(abortSignal);
-			},
-			this._initial ? { initialValue: this._initial } : undefined,
-		);
-		return this._state;
+		this.computed.run();
+		return this._state.get();
+	}
+
+	get computed() {
+		if (this._computed == null) {
+			const initial = this._state.get();
+			this._computed = new AsyncComputed(
+				async (abortSignal: AbortSignal) => {
+					this._invalidate.get();
+
+					const state = await this._fetch(abortSignal);
+					this._state.set(state);
+
+					return state;
+				},
+				initial ? { initialValue: initial } : undefined,
+			);
+		}
+
+		return this._computed;
 	}
 
 	constructor(
@@ -50,7 +63,8 @@ export class AsyncComputedState<T, R = unknown> {
 		},
 	) {
 		if (options != null) {
-			this._initial = options.initial;
+			this._state.set(options.initial);
+
 			if (options.autoRun === true) {
 				this.run();
 			}
@@ -60,7 +74,7 @@ export class AsyncComputedState<T, R = unknown> {
 		if (force) {
 			this.invalidate();
 		}
-		this.state.run();
+		this.computed.run();
 	}
 
 	invalidate() {
@@ -73,6 +87,6 @@ export class AsyncComputedState<T, R = unknown> {
 		complete?: (value: T | undefined) => R;
 		error?: (error: unknown) => R;
 	}) {
-		return renderAsyncComputed(this.state, config);
+		return renderAsyncComputed(this.computed, config);
 	}
 }

src/webviews/home/registration.ts

@@ -14,7 +14,7 @@ export function registerHomeWebviewView(controller: WebviewsController) {
 			type: 'home',
 			plusFeature: false,
 			webviewHostOptions: {
-				retainContextWhenHidden: false,
+				retainContextWhenHidden: true,
 			},
 		},
 		async (container, host) => {