Updates home loading and layout

d13 · d13 · commit 5246516b7d47 · 2024-11-13T22:37:47.000-05:00
- prevents unnessary banners showing during discovery
- removes spacing from empty banners and alerts
- fixes section header skeletons
- fixes pill alignments
diff --git a/src/webviews/apps/home/components/promo-banner.ts b/src/webviews/apps/home/components/promo-banner.ts
@@ -1,6 +1,6 @@
 import { consume } from '@lit/context';
 import { css, html, LitElement, nothing } from 'lit';
-import { customElement, state } from 'lit/decorators.js';
+import { customElement, property, state } from 'lit/decorators.js';
 import { getApplicablePromo } from '../../../../plus/gk/account/promos';
 import type { State } from '../../../home/protocol';
 import { stateContext } from '../context';
@@ -31,14 +31,22 @@ export class GlPromoBanner extends LitElement {
 	@state()
 	private _state!: State;
 
+	@property({ type: Boolean, reflect: true, attribute: 'has-promo' })
+	get hasPromos() {
+		return this.promo == null ? undefined : true;
+	}
+
+	get promo() {
+		return getApplicablePromo(this._state.subscription.state, 'home');
+	}
+
 	override render() {
-		const promo = getApplicablePromo(this._state.subscription.state, 'home');
-		if (!promo) {
+		if (!this.promo) {
 			return nothing;
 		}
 
 		return html`
-			<gl-promo .promo=${promo} class="promo-banner promo-banner--eyebrow" id="promo" type="link"></gl-promo>
+			<gl-promo .promo=${this.promo} class="promo-banner promo-banner--eyebrow" id="promo" type="link"></gl-promo>
 		`;
 	}
 }
diff --git a/src/webviews/apps/home/components/repo-alerts.ts b/src/webviews/apps/home/components/repo-alerts.ts
@@ -40,7 +40,7 @@ export class GlRepoAlerts extends GlElement {
 
 	@property({ type: Boolean, reflect: true, attribute: 'has-alerts' })
 	get hasAlerts() {
-		return this.alertVisibility.header;
+		return this.alertVisibility.header !== true ? undefined : true;
 	}
 
 	@consume<State>({ context: stateContext, subscribe: true })
@@ -54,7 +54,7 @@ export class GlRepoAlerts extends GlElement {
 			noRepo: false,
 			unsafeRepo: false,
 		};
-		if (this._state == null) {
+		if (this._state == null || this._state.discovering) {
 			return sections;
 		}
 
diff --git a/src/webviews/apps/home/home.css.ts b/src/webviews/apps/home/home.css.ts
@@ -42,11 +42,16 @@ export const homeStyles = css`
 		gap: 0.4rem;
 		overflow: hidden;
 	}
-	.home__header {
+
+	.home__alerts {
 		flex: none;
 		padding: 0 2rem;
 		position: relative;
 	}
+	.home__alerts:not([has-alerts]) {
+		display: none;
+	}
+
 	.home__main {
 		flex: 1;
 		overflow: auto;
@@ -55,11 +60,16 @@ export const homeStyles = css`
 	.home__main > *:last-child {
 		margin-bottom: 0;
 	}
+
 	.home__aux,
 	.home__footer {
 		flex: none;
 	}
 
+	.home__aux:has(gl-promo-banner:not([has-promo]):only-child) {
+		display: none;
+	}
+
 	summary {
 		font-size: 1.3rem;
 		font-weight: normal;
diff --git a/src/webviews/apps/home/home.ts b/src/webviews/apps/home/home.ts
@@ -71,7 +71,7 @@ export class GlHomeApp extends GlApp<State> {
 					<gl-promo-banner></gl-promo-banner>
 					${when(!this.state.previewEnabled, () => html`<gl-preview-banner></gl-preview-banner>`)}
 				</aside>
-				<gl-repo-alerts class="home__header"></gl-repo-alerts>
+				<gl-repo-alerts class="home__alerts"></gl-repo-alerts>
 				<main class="home__main scrollable" id="main">
 					<gl-onboarding></gl-onboarding>
 					${when(
diff --git a/src/webviews/apps/home/stateProvider.ts b/src/webviews/apps/home/stateProvider.ts
@@ -8,6 +8,7 @@ import {
 	DidChangeRepositories,
 	DidChangeSubscription,
 	DidChangeWalkthroughProgress,
+	DidCompleteDiscoveringRepositories,
 } from '../../home/protocol';
 import type { Disposable } from '../shared/events';
 import type { HostIpc } from '../shared/ipc';
@@ -34,6 +35,13 @@ export class HomeStateProvider implements Disposable {
 					this.state.repositories = msg.params;
 					this.state.timestamp = Date.now();
 
+					this.provider.setValue(this.state, true);
+					break;
+				case DidCompleteDiscoveringRepositories.is(msg):
+					this.state.repositories = msg.params.repositories;
+					this.state.discovering = msg.params.discovering;
+					this.state.timestamp = Date.now();
+
 					this.provider.setValue(this.state, true);
 					break;
 				case DidChangeWalkthroughProgress.is(msg):
diff --git a/src/webviews/apps/plus/home/components/active-work.ts b/src/webviews/apps/plus/home/components/active-work.ts
@@ -8,7 +8,7 @@ import type { GitTrackingState } from '../../../../../git/models/branch';
 import { createWebviewCommandLink } from '../../../../../system/webview';
 import type { GetOverviewBranch, State } from '../../../../home/protocol';
 import { stateContext } from '../../../home/context';
-import { branchCardStyles, createCommandLink } from './branch-section';
+import { branchCardStyles, createCommandLink, headingLoaderStyles } from './branch-section';
 import type { Overview, OverviewState } from './overviewState';
 import { overviewStateContext } from './overviewState';
 import '../../../shared/components/button';
@@ -27,6 +27,7 @@ export const activeWorkTagName = 'gl-active-work';
 export class GlActiveWork extends SignalWatcher(LitElement) {
 	static override styles = [
 		branchCardStyles,
+		headingLoaderStyles,
 		css`
 			:host {
 				display: block;
@@ -56,6 +57,10 @@ export class GlActiveWork extends SignalWatcher(LitElement) {
 	}
 
 	override render() {
+		if (this._homeState.discovering) {
+			return this.renderLoader();
+		}
+
 		if (this._homeState.repositories.openCount === 0) {
 			return nothing;
 		}
@@ -67,14 +72,18 @@ 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 lines="3"></skeleton-loader>
+			</gl-section>
+		`;
+	}
+
 	private renderPending() {
 		if (this._overviewState.state == null) {
-			return html`
-				<gl-section>
-					<skeleton-loader slot="heading" lines="1"></skeleton-loader>
-					<skeleton-loader lines="3"></skeleton-loader>
-				</gl-section>
-			`;
+			return this.renderLoader();
 		}
 		return this.renderComplete(this._overviewState.state, true);
 	}
diff --git a/src/webviews/apps/plus/home/components/branch-section.ts b/src/webviews/apps/plus/home/components/branch-section.ts
@@ -72,6 +72,12 @@ export class GlBranchSection extends LitElement {
 	}
 }
 
+export const headingLoaderStyles = css`
+	.heading-loader {
+		flex: 1;
+	}
+`;
+
 export const branchCardStyles = css`
 	.branch-item {
 		position: relative;
diff --git a/src/webviews/apps/plus/home/components/overview.ts b/src/webviews/apps/plus/home/components/overview.ts
@@ -8,10 +8,10 @@ import { SetOverviewFilter } from '../../../../home/protocol';
 import { stateContext } from '../../../home/context';
 import { ipcContext } from '../../../shared/context';
 import type { HostIpc } from '../../../shared/ipc';
+import { headingLoaderStyles } from './branch-section';
 import type { OverviewState } from './overviewState';
 import { overviewStateContext } from './overviewState';
 import '../../../shared/components/skeleton-loader';
-import './branch-section';
 import './branch-threshold-filter';
 
 type Overview = GetOverviewResponse;
@@ -21,6 +21,7 @@ export const overviewTagName = 'gl-overview';
 @customElement(overviewTagName)
 export class GlOverview extends SignalWatcher(LitElement) {
 	static override styles = [
+		headingLoaderStyles,
 		css`
 			:host {
 				display: block;
@@ -46,6 +47,10 @@ export class GlOverview extends SignalWatcher(LitElement) {
 	}
 
 	override render() {
+		if (this._homeState.discovering) {
+			return this.renderLoader();
+		}
+
 		if (this._homeState.repositories.openCount === 0) {
 			return nothing;
 		}
@@ -57,14 +62,18 @@ 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 lines="3"></skeleton-loader>
+			</gl-section>
+		`;
+	}
+
 	private renderPending() {
 		if (this._overviewState.state == null) {
-			return html`
-				<gl-section>
-					<skeleton-loader slot="heading" lines="1"></skeleton-loader>
-					<skeleton-loader lines="3"></skeleton-loader>
-				</gl-section>
-			`;
+			return this.renderLoader();
 		}
 		return this.renderComplete(this._overviewState.state, true);
 	}
diff --git a/src/webviews/apps/plus/home/components/overviewState.ts b/src/webviews/apps/plus/home/components/overviewState.ts
@@ -34,6 +34,10 @@ export class OverviewState extends AsyncComputedState<Overview> {
 		this._disposable = this._ipc.onReceiveMessage(msg => {
 			switch (true) {
 				case DidCompleteDiscoveringRepositories.is(msg):
+					if (msg.params.repositories.openCount > 0) {
+						this.run(true);
+					}
+					break;
 				case DidChangeRepositoryWip.is(msg):
 					this.run(true);
 					break;
diff --git a/src/webviews/apps/shared/components/commit/commit-stats.ts b/src/webviews/apps/shared/components/commit/commit-stats.ts
@@ -16,6 +16,11 @@ export class CommitStats extends LitElement {
 			flex-direction: row;
 			align-items: center;
 			gap: 1rem;
+			white-space: nowrap;
+		}
+
+		:host([symbol='icons']) {
+			gap: 0.8rem;
 		}
 
 		.stat {
diff --git a/src/webviews/apps/shared/components/pills/pill.css.ts b/src/webviews/apps/shared/components/pills/pill.css.ts
@@ -20,6 +20,7 @@ export const baseStyles = css`
 		text-transform: uppercase;
 		color: var(--gl-pill-foreground, var(--vscode-foreground));
 		background-color: var(--gl-pill-background, var(--vscode-editorWidget-background));
+		white-space: nowrap;
 	}
 
 	.pill--outlined {
diff --git a/src/webviews/home/homeWebview.ts b/src/webviews/home/homeWebview.ts
@@ -402,6 +402,7 @@ export class HomeWebviewProvider implements WebviewProvider<State, State, HomeWe
 
 		return {
 			...this.host.baseWebviewState,
+			discovering: this._discovering != null,
 			repositories: this.getRepositoriesState(),
 			webroot: this.host.getWebRoot(),
 			subscription: subResult.subscription,
@@ -580,8 +581,10 @@ export class HomeWebviewProvider implements WebviewProvider<State, State, HomeWe
 	}
 
 	private notifyDidCompleteDiscoveringRepositories() {
-		void this.host.notify(DidCompleteDiscoveringRepositories, undefined);
-		this.notifyDidChangeRepositories();
+		void this.host.notify(DidCompleteDiscoveringRepositories, {
+			discovering: this._discovering != null,
+			repositories: this.getRepositoriesState(),
+		});
 	}
 
 	private notifyDidChangeRepositories() {
@@ -606,6 +609,12 @@ export class HomeWebviewProvider implements WebviewProvider<State, State, HomeWe
 	private notifyDidChangeOnboardingIntegration() {
 		// force rechecking
 		const isConnected = this.isAnyIntegrationConnected(true);
+		if (isConnected) {
+			this.onCollapseSection({
+				section: 'integrationBanner',
+				collapsed: true,
+			});
+		}
 		void this.host.notify(DidChangeIntegrationsConnections, {
 			hasAnyIntegrationConnected: isConnected,
 		});
diff --git a/src/webviews/home/protocol.ts b/src/webviews/home/protocol.ts
@@ -7,6 +7,7 @@ import { IpcCommand, IpcNotification, IpcRequest } from '../protocol';
 export const scope: IpcScope = 'home';
 
 export interface State extends WebviewState {
+	discovering: boolean;
 	repositories: DidChangeRepositoriesParams;
 	webroot?: string;
 	subscription: Subscription;
@@ -142,7 +143,12 @@ export const SetOverviewFilter = new IpcCommand<OverviewFilters>(scope, 'overvie
 
 // NOTIFICATIONS
 
-export const DidCompleteDiscoveringRepositories = new IpcNotification<undefined>(
+export interface DidCompleteDiscoveringRepositoriesParams {
+	discovering: boolean;
+	repositories: DidChangeRepositoriesParams;
+}
+
+export const DidCompleteDiscoveringRepositories = new IpcNotification<DidCompleteDiscoveringRepositoriesParams>(
 	scope,
 	'repositories/didCompleteDiscovering',
 );

Original file line number	Diff line number	Diff line change
`@@ -40,7 +40,7 @@ export class GlRepoAlerts extends GlElement {`
`40`	`40`
`41`	`41`	`@property({ type: Boolean, reflect: true, attribute: 'has-alerts' })`
`42`	`42`	`get hasAlerts() {`
`43`		`- return this.alertVisibility.header;`
	`43`	`+ return this.alertVisibility.header !== true ? undefined : true;`
`44`	`44`	`}`
`45`	`45`
`46`	`46`	`@consume<State>({ context: stateContext, subscribe: true })`
`@@ -54,7 +54,7 @@ export class GlRepoAlerts extends GlElement {`
`54`	`54`	`noRepo: false,`
`55`	`55`	`unsafeRepo: false,`
`56`	`56`	`};`
`57`		`- if (this._state == null) {`
	`57`	`+ if (this._state == null \|\| this._state.discovering) {`
`58`	`58`	`return sections;`
`59`	`59`	`}`
`60`	`60`
Original file line number	Diff line number	Diff line change
`@@ -72,6 +72,12 @@ export class GlBranchSection extends LitElement {`
`72`	`72`	`}`
`73`	`73`	`}`
`74`	`74`
	`75`	+export const headingLoaderStyles = css`
	`76`	`+ .heading-loader {`
	`77`	`+ flex: 1;`
	`78`	`+ }`
	`79`	+`;
	`80`	`+`
`75`	`81`	export const branchCardStyles = css`
`76`	`82`	`.branch-item {`
`77`	`83`	`position: relative;`