fix spinner in tts try dialog (#24867)

src/components/buttons/ha-progress-button.ts

@@ -1,13 +1,15 @@
-import "@material/mwc-button";
 import { mdiAlertOctagram, mdiCheckBold } from "@mdi/js";
 import type { TemplateResult } from "lit";
 import { css, html, LitElement, nothing } from "lit";
 import { customElement, property, state } from "lit/decorators";
+import "../ha-button";
 import "../ha-spinner";
 import "../ha-svg-icon";
 
 @customElement("ha-progress-button")
 export class HaProgressButton extends LitElement {
+  @property() public label?: string;
+
   @property({ type: Boolean }) public disabled = false;
 
   @property({ type: Boolean }) public progress = false;
@@ -21,14 +23,16 @@ export class HaProgressButton extends LitElement {
   public render(): TemplateResult {
     const overlay = this._result || this.progress;
     return html`
-      <mwc-button
+      <ha-button
-        ?raised=${this.raised}
+        .raised=${this.raised}
+        .label=${this.label}
         .unelevated=${this.unelevated}
         .disabled=${this.disabled || this.progress}
         class=${this._result || ""}
       >
+        <slot name="icon" slot="icon"></slot>
         <slot></slot>
-      </mwc-button>
+      </ha-button>
       ${!overlay
         ? nothing
         : html`
@@ -68,12 +72,12 @@ export class HaProgressButton extends LitElement {
       pointer-events: none;
     }
 
-    mwc-button {
+    ha-button {
       transition: all 1s;
       pointer-events: initial;
     }
 
-    mwc-button.success {
+    ha-button.success {
       --mdc-theme-primary: white;
       background-color: var(--success-color);
       transition: none;
@@ -81,13 +85,13 @@ export class HaProgressButton extends LitElement {
       pointer-events: none;
     }
 
-    mwc-button[unelevated].success,
+    ha-button[unelevated].success,
-    mwc-button[raised].success {
+    ha-button[raised].success {
       --mdc-theme-primary: var(--success-color);
       --mdc-theme-on-primary: white;
     }
 
-    mwc-button.error {
+    ha-button.error {
       --mdc-theme-primary: white;
       background-color: var(--error-color);
       transition: none;
@@ -95,8 +99,8 @@ export class HaProgressButton extends LitElement {
       pointer-events: none;
     }
 
-    mwc-button[unelevated].error,
+    ha-button[unelevated].error,
-    mwc-button[raised].error {
+    ha-button[raised].error {
       --mdc-theme-primary: var(--error-color);
       --mdc-theme-on-primary: white;
     }
@@ -113,8 +117,8 @@ export class HaProgressButton extends LitElement {
       color: white;
     }
 
-    mwc-button.success slot,
+    ha-button.success slot,
-    mwc-button.error slot {
+    ha-button.error slot {
       visibility: hidden;
     }
     :host([destructive]) {

src/dialogs/tts-try/dialog-tts-try.ts

@@ -3,7 +3,6 @@ import { css, html, LitElement, nothing } from "lit";
 import { customElement, property, query, state } from "lit/decorators";
 import { storage } from "../../common/decorators/storage";
 import { fireEvent } from "../../common/dom/fire_event";
-import "../../components/ha-button";
 import { createCloseHeading } from "../../components/ha-dialog";
 import "../../components/ha-textarea";
 import type { HaTextArea } from "../../components/ha-textarea";
@@ -11,7 +10,7 @@ import { convertTextToSpeech } from "../../data/tts";
 import type { HomeAssistant } from "../../types";
 import { showAlertDialog } from "../generic/show-dialog-box";
 import type { TTSTryDialogParams } from "./show-dialog-tts-try";
-import "../../components/ha-spinner";
+import "../../components/buttons/ha-progress-button";
 
 @customElement("dialog-tts-try")
 export class TTSTryDialog extends LitElement {
@@ -81,28 +80,17 @@ export class TTSTryDialog extends LitElement {
           ?dialogInitialFocus=${!this._defaultMessage}
         >
         </ha-textarea>
-        ${this._loadingExample
+
-          ? html`
+        <ha-progress-button
-              <ha-spinner
+          .progress=${this._loadingExample}
-                size="small"
-                slot="primaryAction"
-                class="loading"
-              ></ha-spinner>
-            `
-          : html`
-              <ha-button
           ?dialogInitialFocus=${Boolean(this._defaultMessage)}
           slot="primaryAction"
           .label=${this.hass.localize("ui.dialogs.tts-try.play")}
           @click=${this._playExample}
           .disabled=${!this._valid}
         >
-                <ha-svg-icon
+          <ha-svg-icon slot="icon" .path=${mdiPlayCircleOutline}></ha-svg-icon>
-                  slot="icon"
+        </ha-progress-button>
-                  .path=${mdiPlayCircleOutline}
-                ></ha-svg-icon>
-              </ha-button>
-            `}
       </ha-dialog>
     `;
   }