Refreshed display of check results after all checks are complete.

Author: AndyButland

src/Umbraco.Web.UI.Client/src/packages/health-check/health-check-dashboard.context.ts

@@ -20,9 +20,9 @@ export class UmbHealthCheckDashboardContext {
 		this.host = host;
 	}
 
-	checkAll() {
+	async checkAll() {
 		for (const [label, api] of this.apis.entries()) {
-			api?.checkGroup?.(label);
+			await api?.checkGroup?.(label);
 		}
 	}
 

src/Umbraco.Web.UI.Client/src/packages/health-check/views/health-check-group.element.ts

@@ -54,7 +54,7 @@ export class UmbDashboardHealthCheckGroupElement extends UmbLitElement {
 
 	private async _buttonHandler() {
 		this._buttonState = 'waiting';
-		this._api?.checkGroup(this.groupName);
+		await this._api?.checkGroup(this.groupName);
 		this._buttonState = 'success';
 	}
 

src/Umbraco.Web.UI.Client/src/packages/health-check/views/health-check-overview.element.ts

@@ -23,7 +23,9 @@ export class UmbDashboardHealthCheckOverviewElement extends UmbLitElement {
 	}
 
 	private async _onHealthCheckHandler() {
-		this._healthCheckDashboardContext?.checkAll();
+		this._buttonState = 'waiting';
+		await this._healthCheckDashboardContext?.checkAll();
+		this._buttonState = 'success';
 	}
 
 	override render() {
@@ -41,7 +43,13 @@ export class UmbDashboardHealthCheckOverviewElement extends UmbLitElement {
 					</uui-button>
 				</div>
 				<div class="grid">
-					<umb-extension-slot type="healthCheck" default-element="umb-health-check-group-box-overview">
+
+					${
+						// As well as the visual presentation, this amend to the rendering based on button state is necessary
+						// in order to trigger an update after the checks are complete (this.requestUpdate() doesn't suffice).
+						this._buttonState !== 'waiting'
+							? html`<umb-extension-slot type="healthCheck" default-element="umb-health-check-group-box-overview">`
+							: html`<uui-loader></uui-loader>`}
 					</umb-extension-slot>
 				</div>
 			</uui-box>