show spinner on update button (during update installation) (#26110)

* scroll to top when installing an update

* Revert "scroll to top when installing an update"

This reverts commit d0051b0.

* add progress spinner to update button

* refactor disabled logic for update/skip button

* do not run update when disabled button is clicked

* refactor: use new ha-button to show progress

* refactor: move functions to update.ts

Author: chrisv-dev

src/data/update.ts

@@ -4,7 +4,7 @@ import type {
   HassEntityBase,
   HassEvent,
 } from "home-assistant-js-websocket";
-import { BINARY_STATE_ON } from "../common/const";
+import { BINARY_STATE_ON, BINARY_STATE_OFF } from "../common/const";
 import { computeDomain } from "../common/entity/compute_domain";
 import { computeStateDomain } from "../common/entity/compute_state_domain";
 import { supportsFeature } from "../common/entity/supports-feature";
@@ -52,6 +52,15 @@ export const updateCanInstall = (
     (showSkipped && Boolean(entity.attributes.skipped_version))) &&
   supportsFeature(entity, UpdateEntityFeature.INSTALL);
 
+export const latestVersionIsSkipped = (entity: UpdateEntity): boolean =>
+  !!(
+    entity.attributes.latest_version &&
+    entity.attributes.skipped_version === entity.attributes.latest_version
+  );
+
+export const updateButtonIsDisabled = (entity: UpdateEntity): boolean =>
+  entity.state === BINARY_STATE_OFF && !latestVersionIsSkipped(entity);
+
 export const updateIsInstalling = (entity: UpdateEntity): boolean =>
   !!entity.attributes.in_progress;
 

src/dialogs/more-info/controls/more-info-update.ts

@@ -7,6 +7,7 @@ import { relativeTime } from "../../../common/datetime/relative_time";
 import { supportsFeature } from "../../../common/entity/supports-feature";
 import "../../../components/ha-alert";
 import "../../../components/ha-button";
+import "../../../components/buttons/ha-progress-button";
 import "../../../components/ha-checkbox";
 import "../../../components/ha-faded";
 import "../../../components/ha-markdown";
@@ -26,6 +27,8 @@ import {
   UpdateEntityFeature,
   updateIsInstalling,
   updateReleaseNotes,
+  latestVersionIsSkipped,
+  updateButtonIsDisabled,
 } from "../../../data/update";
 import type { HomeAssistant } from "../../../types";
 import { showAlertDialog } from "../../generic/show-dialog-box";
@@ -180,11 +183,6 @@ class MoreInfoUpdate extends LitElement {
       return nothing;
     }
 
-    const skippedVersion =
-      this.stateObj.attributes.latest_version &&
-      this.stateObj.attributes.skipped_version ===
-        this.stateObj.attributes.latest_version;
-
     const createBackupTexts = this._computeCreateBackupTexts();
 
     return html`
@@ -312,7 +310,7 @@ class MoreInfoUpdate extends LitElement {
                 <ha-button
                   appearance="plain"
                   @click=${this._handleSkip}
-                  .disabled=${skippedVersion ||
+                  .disabled=${latestVersionIsSkipped(this.stateObj) ||
                   this.stateObj.state === BINARY_STATE_OFF ||
                   updateIsInstalling(this.stateObj)}
                 >
@@ -325,9 +323,8 @@ class MoreInfoUpdate extends LitElement {
             ? html`
                 <ha-button
                   @click=${this._handleInstall}
-                  .disabled=${(this.stateObj.state === BINARY_STATE_OFF &&
-                    !skippedVersion) ||
-                  updateIsInstalling(this.stateObj)}
+                  .loading=${updateIsInstalling(this.stateObj)}
+                  .disabled=${updateButtonIsDisabled(this.stateObj)}
                 >
                   ${this.hass.localize(
                     "ui.dialogs.more_info_control.update.update"