From e546cb33743216034b830c282b85f2b715e87d55 Mon Sep 17 00:00:00 2001
From: Petar Petrov <MindFreeze@users.noreply.github.com>
Date: Mon, 29 Sep 2025 10:19:18 +0300
Subject: [PATCH] Make "loading next step" look like progress step in config
 flows (#27234)

---
 src/dialogs/config-flow/step-flow-loading.ts  | 9 +++++----
 src/dialogs/config-flow/step-flow-progress.ts | 3 ++-
 2 files changed, 7 insertions(+), 5 deletions(-)

diff --git a/src/dialogs/config-flow/step-flow-loading.ts b/src/dialogs/config-flow/step-flow-loading.ts
index 99d2b05a47..a256a939de 100644
--- a/src/dialogs/config-flow/step-flow-loading.ts
+++ b/src/dialogs/config-flow/step-flow-loading.ts
@@ -26,20 +26,21 @@ class StepFlowLoading extends LitElement {
       this.step
     );
     return html`
-      <div class="init-spinner">
+      <div class="content">
+        <ha-spinner size="large"></ha-spinner>
         ${description ? html`<div>${description}</div>` : ""}
-        <ha-spinner></ha-spinner>
       </div>
     `;
   }
 
   static styles = css`
-    .init-spinner {
+    .content {
+      margin-top: 0;
       padding: 50px 100px;
       text-align: center;
     }
     ha-spinner {
-      margin-top: 16px;
+      margin-bottom: 16px;
     }
   `;
 }
diff --git a/src/dialogs/config-flow/step-flow-progress.ts b/src/dialogs/config-flow/step-flow-progress.ts
index 3467bba1f7..a002cc0d25 100644
--- a/src/dialogs/config-flow/step-flow-progress.ts
+++ b/src/dialogs/config-flow/step-flow-progress.ts
@@ -34,7 +34,7 @@ class StepFlowProgress extends LitElement {
                 )}%</ha-progress-ring
               >
             `
-          : html` <ha-spinner size="large"></ha-spinner> `}
+          : html`<ha-spinner size="large"></ha-spinner>`}
         ${this.flowConfig.renderShowFormProgressDescription(
           this.hass,
           this.step
@@ -48,6 +48,7 @@ class StepFlowProgress extends LitElement {
       configFlowContentStyles,
       css`
         .content {
+          margin-top: 0;
           padding: 50px 100px;
           text-align: center;
         }