change

hassio/src/dashboard/hassio-update.ts

@@ -220,10 +220,29 @@ export class HassioUpdate extends LitElement {
   }
 
   private async _updateCore(): Promise<void> {
-    await updateCore(this.hass);
+    try {
+      await updateCore(this.hass);
+    } catch (err) {
+      if (this.hass.connection.connected && !ignoreSupervisorError(err)) {
+        showAlertDialog(this, {
+          title: this.supervisor.localize(
+            "common.failed_to_update_name",
+            "name",
+            "Home Assistant Core"
+          ),
+          text: extractApiErrorMessage(err),
+        });
+        return;
+      }
+    }
+
     fireEvent(this, "supervisor-collection-refresh", {
       collection: "core",
     });
+    fireEvent(this, "supervisor-applying-update", {
+      name: "Home Assistant Core",
+      version: this.supervisor.core.version_latest,
+    });
   }
 
   static get styles(): CSSResultGroup {

hassio/src/dialogs/update/dialog-supervisor-update.ts

@@ -7,10 +7,7 @@ import "../../../../src/components/ha-dialog";
 import "../../../../src/components/ha-settings-row";
 import "../../../../src/components/ha-svg-icon";
 import "../../../../src/components/ha-switch";
-import {
+import { extractApiErrorMessage } from "../../../../src/data/hassio/common";
-  extractApiErrorMessage,
-  ignoreSupervisorError,
-} from "../../../../src/data/hassio/common";
 import { createHassioPartialSnapshot } from "../../../../src/data/hassio/snapshot";
 import { haStyle, haStyleDialog } from "../../../../src/resources/styles";
 import type { HomeAssistant } from "../../../../src/types";
@@ -153,16 +150,7 @@ class DialogSupervisorUpdate extends LitElement {
     }
 
     this._action = "update";
-    try {
+    await this._dialogParams!.updateHandler!();
-      await this._dialogParams!.updateHandler!();
-    } catch (err) {
-      if (this.hass.connection.connected && !ignoreSupervisorError(err)) {
-        this._error = extractApiErrorMessage(err);
-      }
-      this._action = null;
-      return;
-    }
-
     this.closeDialog();
   }
 

hassio/src/dialogs/update/show-dialog-update.ts

@@ -1,17 +1,18 @@
 import { fireEvent } from "../../../../src/common/dom/fire_event";
+import { HassioPartialSnapshotCreateParams } from "../../../../src/data/hassio/snapshot";
 import { Supervisor } from "../../../../src/data/supervisor/supervisor";
 
 export interface SupervisorDialogSupervisorUpdateParams {
   supervisor: Supervisor;
   name: string;
   version: string;
-  snapshotParams: any;
+  snapshotParams: HassioPartialSnapshotCreateParams;
   updateHandler: () => Promise<void>;
 }
 
 export const showDialogSupervisorUpdate = (
   element: HTMLElement,
-  dialogParams: SupervisorDialogSupervisorUpdateParams
+  dialogParams: Partial<SupervisorDialogSupervisorUpdateParams>
 ): void => {
   fireEvent(element, "show-dialog", {
     dialogTag: "dialog-supervisor-update",

hassio/src/hassio-panel.ts

@@ -1,12 +1,26 @@
-import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit";
+import {
-import { customElement, property } from "lit/decorators";
+  css,
+  CSSResultGroup,
+  html,
+  LitElement,
+  PropertyValues,
+  TemplateResult,
+} from "lit";
+import { customElement, property, state } from "lit/decorators";
 import {
   Supervisor,
+  supervisorApplyUpdateDetails,
   supervisorCollection,
 } from "../../src/data/supervisor/supervisor";
 import { HomeAssistant, Route } from "../../src/types";
 import "./hassio-panel-router";
 
+declare global {
+  interface HASSDomEvents {
+    "supervisor-applying-update": supervisorApplyUpdateDetails;
+  }
+}
+
 @customElement("hassio-panel")
 class HassioPanel extends LitElement {
   @property({ attribute: false }) public hass!: HomeAssistant;
@@ -17,6 +31,16 @@ class HassioPanel extends LitElement {
 
   @property({ attribute: false }) public route!: Route;
 
+  @state() private _applyingUpdate?: supervisorApplyUpdateDetails;
+
+  protected firstUpdated(changedProps: PropertyValues) {
+    super.firstUpdated(changedProps);
+    this._applyingUpdate = undefined;
+    this.addEventListener("supervisor-applying-update", (ev) => {
+      this._applyingUpdate = ev.detail;
+    });
+  }
+
   protected render(): TemplateResult {
     if (!this.hass) {
       return html`<hass-loading-screen></hass-loading-screen>`;
@@ -29,6 +53,16 @@ class HassioPanel extends LitElement {
     ) {
       return html`<hass-loading-screen></hass-loading-screen>`;
     }
+
+    if (this._applyingUpdate !== undefined) {
+      return html`<hass-loading-screen no-toolbar>
+        ${this.supervisor.localize("dialog.update.updating", {
+          name: this._applyingUpdate.name,
+          version: this._applyingUpdate.version,
+        })}
+      </hass-loading-screen>`;
+    }
+
     return html`
       <hassio-panel-router
         .hass=${this.hass}

hassio/src/system/hassio-core-info.ts

@@ -11,6 +11,7 @@ import {
   extractApiErrorMessage,
   fetchHassioStats,
   HassioStats,
+  ignoreSupervisorError,
 } from "../../../src/data/hassio/common";
 import { restartCore, updateCore } from "../../../src/data/supervisor/core";
 import { Supervisor } from "../../../src/data/supervisor/supervisor";
@@ -150,7 +151,7 @@ class HassioCoreInfo extends LitElement {
           title: this.supervisor.localize(
             "common.failed_to_restart_name",
             "name",
-            "Home AssistantCore"
+            "Home Assistant Core"
           ),
           text: extractApiErrorMessage(err),
         });
@@ -175,10 +176,29 @@ class HassioCoreInfo extends LitElement {
   }
 
   private async _updateCore(): Promise<void> {
-    await updateCore(this.hass);
+    try {
+      await updateCore(this.hass);
+    } catch (err) {
+      if (this.hass.connection.connected && !ignoreSupervisorError(err)) {
+        showAlertDialog(this, {
+          title: this.supervisor.localize(
+            "common.failed_to_update_name",
+            "name",
+            "Home Assistant Core"
+          ),
+          text: extractApiErrorMessage(err),
+        });
+        return;
+      }
+    }
+
     fireEvent(this, "supervisor-collection-refresh", {
       collection: "core",
     });
+    fireEvent(this, "supervisor-applying-update", {
+      name: "Home Assistant Core",
+      version: this.supervisor.core.version_latest,
+    });
   }
 
   static get styles(): CSSResultGroup {

src/data/supervisor/supervisor.ts

@@ -13,6 +13,11 @@ import {
 } from "../hassio/supervisor";
 import { SupervisorStore } from "./store";
 
+export interface supervisorApplyUpdateDetails {
+  name: string;
+  version: string;
+}
+
 export const supervisorWSbaseCommand = {
   type: "supervisor/api",
   method: "GET",

src/layouts/hass-loading-screen.ts

@@ -39,6 +39,7 @@ class HassLoadingScreen extends LitElement {
           </div>`}
       <div class="content">
         <ha-circular-progress active></ha-circular-progress>
+        <slot></slot>
       </div>
     `;
   }
@@ -76,6 +77,7 @@ class HassLoadingScreen extends LitElement {
         .content {
           height: calc(100% - var(--header-height));
           display: flex;
+          flex-direction: column;
           align-items: center;
           justify-content: center;
         }