Add applying update "screen"

hassio/src/dashboard/hassio-update.ts

@@ -168,6 +168,13 @@ export class HassioUpdate extends LitElement {
           homeassistant: true,
         },
         updateHandler: async () => this._updateCore(),
+        applyingUpdate: () => {
+          fireEvent(this, "supervisor-applying-update", {
+            type: "core",
+            name: "Home Assistant Core",
+            version: this.supervisor.core.version_latest,
+          });
+        },
       });
       return;
     }

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

@@ -1,6 +1,7 @@
 import "@material/mwc-button/mwc-button";
 import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit";
 import { customElement, state } from "lit/decorators";
+import { LocalStorage } from "../../../../src/common/decorators/local-storage";
 import { fireEvent } from "../../../../src/common/dom/fire_event";
 import "../../../../src/components/ha-circular-progress";
 import "../../../../src/components/ha-dialog";
@@ -22,8 +23,6 @@ class DialogSupervisorUpdate extends LitElement {
 
   @state() private _opened = false;
 
-  @state() private _createSnapshot = true;
-
   @state() private _action: "snapshot" | "update" | null = null;
 
   @state() private _error?: string;
@@ -31,6 +30,11 @@ class DialogSupervisorUpdate extends LitElement {
   @state()
   private _dialogParams?: SupervisorDialogSupervisorUpdateParams;
 
+  @LocalStorage("snapshotBeforeUpdate", true, {
+    attribute: false,
+  })
+  private _snapshotBeforeUpdate = true;
+
   public async showDialog(
     params: SupervisorDialogSupervisorUpdateParams
   ): Promise<void> {
@@ -41,7 +45,6 @@ class DialogSupervisorUpdate extends LitElement {
 
   public closeDialog(): void {
     this._action = null;
-    this._createSnapshot = true;
     this._error = undefined;
     this._dialogParams = undefined;
     fireEvent(this, "dialog-closed", { dialog: this.localName });
@@ -95,7 +98,7 @@ class DialogSupervisorUpdate extends LitElement {
                   )}
                 </span>
                 <ha-switch
-                  .checked=${this._createSnapshot}
+                  .checked=${this._snapshotBeforeUpdate}
                   haptic
                   @click=${this._toggleSnapshot}
                 >
@@ -134,11 +137,11 @@ class DialogSupervisorUpdate extends LitElement {
   }
 
   private _toggleSnapshot() {
-    this._createSnapshot = !this._createSnapshot;
+    this._snapshotBeforeUpdate = !this._snapshotBeforeUpdate;
   }
 
   private async _update() {
-    if (this._createSnapshot) {
+    if (this._snapshotBeforeUpdate) {
       this._action = "snapshot";
       try {
         await createHassioPartialSnapshot(
@@ -158,11 +161,13 @@ class DialogSupervisorUpdate extends LitElement {
     } catch (err) {
       if (this.hass.connection.connected && !ignoreSupervisorError(err)) {
         this._error = extractApiErrorMessage(err);
-      }
         this._action = null;
         return;
       }
-
+    }
+    if (this._dialogParams?.applyingUpdate) {
+      this._dialogParams.applyingUpdate();
+    }
     this.closeDialog();
   }
 

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

@@ -7,6 +7,7 @@ export interface SupervisorDialogSupervisorUpdateParams {
   version: string;
   snapshotParams: any;
   updateHandler: () => Promise<void>;
+  applyingUpdate?: () => void;
 }
 
 export const showDialogSupervisorUpdate = (

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("common.applying_update", {
+          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

@@ -171,6 +171,13 @@ class HassioCoreInfo extends LitElement {
         homeassistant: true,
       },
       updateHandler: async () => this._updateCore(),
+      applyingUpdate: () => {
+        fireEvent(this, "supervisor-applying-update", {
+          type: "core",
+          name: "Home Assistant Core",
+          version: this.supervisor.core.version_latest,
+        });
+      },
     });
   }
 

src/data/supervisor/supervisor.ts

@@ -13,6 +13,12 @@ import {
 } from "../hassio/supervisor";
 import { SupervisorStore } from "./store";
 
+export interface supervisorApplyUpdateDetails {
+  type: "core" | "supervisor" | "os" | "addon";
+  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;
         }

src/translations/en.json

@@ -3779,6 +3779,7 @@
       "update_available": "{count, plural,\n  one {Update}\n  other {{count} updates}\n} pending",
       "update": "Update",
       "version": "Version",
+      "applying_update": "Applying update to {version} for {name}",
       "error": {
         "unknown": "Unknown error",
         "update_failed": "Update failed"