From e3a9d754dfad19da1f591e2e6ff29fd04414ed63 Mon Sep 17 00:00:00 2001
From: Aidan Timson <aidan@timmo.dev>
Date: Thu, 28 Aug 2025 17:05:53 +0100
Subject: [PATCH] Change loading detailed storage to use `ha-alert` with
 spinner (#26749)

* Change spinner overlay to use `ha-alert` with messaging

* Use spinner for icon slot
---
 .../storage/ha-config-section-storage.ts      | 27 ++++++++++---------
 src/translations/en.json                      |  1 +
 2 files changed, 15 insertions(+), 13 deletions(-)

diff --git a/src/panels/config/storage/ha-config-section-storage.ts b/src/panels/config/storage/ha-config-section-storage.ts
index 7357ef937b..5a7e094495 100644
--- a/src/panels/config/storage/ha-config-section-storage.ts
+++ b/src/panels/config/storage/ha-config-section-storage.ts
@@ -327,8 +327,7 @@ class HaConfigSectionStorage extends LitElement {
             >${roundWithOneDecimal(freeSpaceGB)} GB</span
           >`,
       });
-      const chart = html`
-        <ha-segmented-bar
+      return html`<ha-segmented-bar
           .heading=${this.hass.localize("ui.panel.config.storage.used_space")}
           .description=${this.hass.localize(
             "ui.panel.config.storage.detailed_description",
@@ -339,17 +338,15 @@ class HaConfigSectionStorage extends LitElement {
           )}
           .segments=${segments}
         ></ha-segmented-bar>
-      `;
-      return storageInfo || storageInfo === null
-        ? chart
-        : html`
-            <div class="loading-container">
-              ${chart}
-              <div class="loading-overlay">
-                <ha-spinner></ha-spinner>
-              </div>
-            </div>
-          `;
+
+        ${!storageInfo || storageInfo === null
+          ? html`<ha-alert alert-type="info">
+              <ha-spinner slot="icon"></ha-spinner>
+              ${this.hass.localize(
+                "ui.panel.config.storage.loading_detailed"
+              )}</ha-alert
+            >`
+          : nothing}`;
     }
   );
 
@@ -522,6 +519,10 @@ class HaConfigSectionStorage extends LitElement {
     ha-icon-next {
       width: 24px;
     }
+
+    ha-alert ha-spinner {
+      --ha-spinner-size: 24px;
+    }
   `;
 }
 
diff --git a/src/translations/en.json b/src/translations/en.json
index 2c9aa4646e..1b4b0267c6 100644
--- a/src/translations/en.json
+++ b/src/translations/en.json
@@ -6674,6 +6674,7 @@
           "description": "{percent_used} used - {free_space} free",
           "used_space": "Storage",
           "detailed_description": "{used} of {total} used",
+          "loading_detailed": "Loading detailed storage information...",
           "segments": {
             "used": "Used space",
             "free": "Free space",