Make update notification better, add progress (#12581)

src/data/update.ts

@@ -2,8 +2,10 @@ import type {
   HassEntities,
   HassEntityAttributeBase,
   HassEntityBase,
+  HassEvent,
 } from "home-assistant-js-websocket";
 import { BINARY_STATE_ON } 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";
 import { caseInsensitiveStringCompare } from "../common/string/compare";
@@ -110,15 +112,32 @@ export const checkForEntityUpdates = async (
     return;
   }
 
+  let updated = 0;
+
+  const unsubscribeEvents = await hass.connection.subscribeEvents<HassEvent>(
+    (event) => {
+      if (computeDomain(event.data.entity_id) === "update") {
+        updated++;
+        showToast(element, {
+          message: hass.localize("ui.panel.config.updates.updates_refreshed", {
+            count: updated,
+          }),
+        });
+      }
+    },
+    "state_changed"
+  );
+
   await hass.callService("homeassistant", "update_entity", {
     entity_id: entities,
   });
 
-  if (filterUpdateEntitiesWithInstall(hass.states).length) {
-    showToast(element, {
-      message: hass.localize("ui.panel.config.updates.updates_refreshed"),
-    });
-  } else {
+  // there is no reliable way to know if all the updates are done updating, so we just wait a bit for now...
+  await new Promise((r) => setTimeout(r, 10000));
+
+  unsubscribeEvents();
+
+  if (updated === 0) {
     showToast(element, {
       message: hass.localize("ui.panel.config.updates.no_new_updates"),
     });

src/panels/config/dashboard/ha-config-updates.ts

@@ -9,6 +9,7 @@ import "../../../components/ha-alert";
 import "../../../components/ha-icon-next";
 import type { UpdateEntity } from "../../../data/update";
 import type { HomeAssistant } from "../../../types";
+import "../../../components/ha-circular-progress";
 
 @customElement("ha-config-updates")
 class HaConfigUpdates extends LitElement {
@@ -51,7 +52,18 @@ class HaConfigUpdates extends LitElement {
                 .title=${entity.attributes.title ||
                 entity.attributes.friendly_name}
                 .stateObj=${entity}
+                class=${this.narrow && entity.attributes.in_progress
+                  ? "updating"
+                  : ""}
               ></state-badge>
+              ${this.narrow && entity.attributes.in_progress
+                ? html`<ha-circular-progress
+                    active
+                    size="small"
+                    slot="graphic"
+                    class="absolute"
+                  ></ha-circular-progress>`
+                : ""}
               <span
                 >${entity.attributes.title ||
                 entity.attributes.friendly_name}</span
@@ -67,7 +79,13 @@ class HaConfigUpdates extends LitElement {
                   : ""}
               </span>
               ${!this.narrow
-                ? html`<ha-icon-next slot="meta"></ha-icon-next>`
+                ? entity.attributes.in_progress
+                  ? html`<ha-circular-progress
+                      active
+                      size="small"
+                      slot="meta"
+                    ></ha-circular-progress>`
+                  : html`<ha-icon-next slot="meta"></ha-icon-next>`
                 : ""}
             </mwc-list-item>
           `
@@ -121,6 +139,12 @@ class HaConfigUpdates extends LitElement {
           cursor: pointer;
           font-size: 16px;
         }
+        ha-circular-progress.absolute {
+          position: absolute;
+        }
+        state-badge.updating {
+          opacity: 0.5;
+        }
       `,
     ];
   }

src/translations/en.json

@@ -1183,7 +1183,7 @@
           },
           "check_updates": "Check for updates",
           "no_new_updates": "No new updates found",
-          "updates_refreshed": "Updates refreshed",
+          "updates_refreshed": "{count} {count, plural,\n  one {update}\n  other {updates}\n} refreshed",
           "title": "{count} {count, plural,\n  one {update}\n  other {updates}\n}",
           "unable_to_fetch": "Unable to load updates",
           "version_available": "Version {version_available} is available",