Updates empty state for branch sections

Author: d13

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

@@ -58,12 +58,10 @@ export class GlBranchSection extends LitElement {
 	@property({ type: Boolean }) isFetching = false;
 
 	private renderSectionLabel() {
-		if (this.isFetching) {
+		if (this.isFetching || this.branches.length === 0) {
 			return this.label;
 		}
-		if (!this.branches.length) {
-			return `No ${this.label} branches`;
-		}
+
 		return `${this.label} (${this.branches.length})`;
 	}
 
@@ -75,6 +73,14 @@ export class GlBranchSection extends LitElement {
 				${this.branches.map(
 					branch => html`<gl-branch-card .repo=${this.repo} .branch=${branch}></gl-branch-card>`,
 				)}
+				${when(
+					this.branches.length > 0,
+					() =>
+						this.branches.map(
+							branch => html`<gl-branch-card .repo=${this.repo} .branch=${branch}></gl-branch-card>`,
+						),
+					() => html`<p>No ${this.label} branches</p>`,
+				)}
 			</gl-section>
 		`;
 	}

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

@@ -96,7 +96,7 @@ export class GlOverview extends SignalWatcher(LitElement) {
 		const { repository } = overview;
 		return html`
 			<gl-branch-section
-				label="Recent"
+				label="recent"
 				.isFetching=${isFetching}
 				.repo=${repository.path}
 				.branches=${repository.branches.recent}
@@ -120,7 +120,7 @@ export class GlOverview extends SignalWatcher(LitElement) {
 				this._overviewState.filter.stale?.show === true,
 				() => html`
 					<gl-branch-section
-						label="Stale"
+						label="stale"
 						.repo=${repository.path}
 						.branches=${repository.branches.stale}
 					></gl-branch-section>