diff --git a/demo/src/custom-cards/ha-demo-card.ts b/demo/src/custom-cards/ha-demo-card.ts index 13f88552f0..b9e1a32e68 100644 --- a/demo/src/custom-cards/ha-demo-card.ts +++ b/demo/src/custom-cards/ha-demo-card.ts @@ -5,7 +5,7 @@ import { until } from "lit/directives/until"; import { fireEvent } from "../../../src/common/dom/fire_event"; import "../../../src/components/ha-card"; import "../../../src/components/ha-button"; -import "../../../src/components/ha-circular-progress"; +import "../../../src/components/ha-spinner"; import type { LovelaceCardConfig } from "../../../src/data/lovelace/config/card"; import type { MockHomeAssistant } from "../../../src/fake_data/provide_hass"; import type { @@ -44,9 +44,7 @@ export class HADemoCard extends LitElement implements LovelaceCard {
${this._switching - ? html` - - ` + ? html`` : until( selectedDemoConfig.then( (conf) => html` diff --git a/gallery/src/pages/components/ha-circular-progress.ts b/gallery/src/pages/components/ha-circular-progress.ts deleted file mode 100644 index 66873acb32..0000000000 --- a/gallery/src/pages/components/ha-circular-progress.ts +++ /dev/null @@ -1,63 +0,0 @@ -import type { TemplateResult } from "lit"; -import { html, css, LitElement } from "lit"; -import { customElement, property } from "lit/decorators"; -import "../../../../src/components/ha-bar"; -import "../../../../src/components/ha-card"; -import "../../../../src/components/ha-circular-progress"; -import "@material/web/progress/circular-progress"; -import type { HomeAssistant } from "../../../../src/types"; - -@customElement("demo-components-ha-circular-progress") -export class DemoHaCircularProgress extends LitElement { - @property({ attribute: false }) hass!: HomeAssistant; - - protected render(): TemplateResult { - return html` -
-
- -
- - - -
- -
- -
`; - } - - static styles = css` - ha-card { - max-width: 600px; - margin: 24px auto; - } - `; -} - -declare global { - interface HTMLElementTagNameMap { - "demo-components-ha-circular-progress": DemoHaCircularProgress; - } -} diff --git a/gallery/src/pages/components/ha-circular-progress.markdown b/gallery/src/pages/components/ha-spinner.markdown similarity index 70% rename from gallery/src/pages/components/ha-circular-progress.markdown rename to gallery/src/pages/components/ha-spinner.markdown index 88140506ec..0cd28796c4 100644 --- a/gallery/src/pages/components/ha-circular-progress.markdown +++ b/gallery/src/pages/components/ha-spinner.markdown @@ -1,4 +1,4 @@ --- -title: Circular Progress +title: Spinner subtitle: Can be used to indicate an ongoing task. --- diff --git a/gallery/src/pages/components/ha-spinner.ts b/gallery/src/pages/components/ha-spinner.ts new file mode 100644 index 0000000000..d84b13f399 --- /dev/null +++ b/gallery/src/pages/components/ha-spinner.ts @@ -0,0 +1,44 @@ +import type { TemplateResult } from "lit"; +import { html, css, LitElement } from "lit"; +import { customElement, property } from "lit/decorators"; +import "../../../../src/components/ha-bar"; +import "../../../../src/components/ha-card"; +import "../../../../src/components/ha-spinner"; +import type { HomeAssistant } from "../../../../src/types"; + +@customElement("demo-components-ha-spinner") +export class DemoHaSpinner extends LitElement { + @property({ attribute: false }) hass!: HomeAssistant; + + protected render(): TemplateResult { + return html` +
+
+ +
+ + + +
+ +
+ +
`; + } + + static styles = css` + ha-card { + max-width: 600px; + margin: 24px auto; + } + `; +} + +declare global { + interface HTMLElementTagNameMap { + "demo-components-ha-spinner": DemoHaSpinner; + } +} diff --git a/hassio/src/addon-view/config/hassio-addon-config-tab.ts b/hassio/src/addon-view/config/hassio-addon-config-tab.ts index 451f289dd2..6aa4cdd446 100644 --- a/hassio/src/addon-view/config/hassio-addon-config-tab.ts +++ b/hassio/src/addon-view/config/hassio-addon-config-tab.ts @@ -1,7 +1,7 @@ import type { CSSResultGroup, TemplateResult } from "lit"; import { css, html, LitElement } from "lit"; import { customElement, property } from "lit/decorators"; -import "../../../../src/components/ha-circular-progress"; +import "../../../../src/components/ha-spinner"; import type { HassioAddonDetails } from "../../../../src/data/hassio/addon"; import type { Supervisor } from "../../../../src/data/supervisor/supervisor"; import { haStyle } from "../../../../src/resources/styles"; @@ -21,7 +21,7 @@ class HassioAddonConfigDashboard extends LitElement { protected render(): TemplateResult { if (!this.addon) { - return html``; + return html``; } const hasConfiguration = (this.addon.options && Object.keys(this.addon.options).length) || diff --git a/hassio/src/addon-view/documentation/hassio-addon-documentation-tab.ts b/hassio/src/addon-view/documentation/hassio-addon-documentation-tab.ts index 64abf00abe..4b5784f544 100644 --- a/hassio/src/addon-view/documentation/hassio-addon-documentation-tab.ts +++ b/hassio/src/addon-view/documentation/hassio-addon-documentation-tab.ts @@ -2,7 +2,7 @@ import "../../../../src/components/ha-card"; import type { CSSResultGroup, TemplateResult } from "lit"; import { css, html, LitElement } from "lit"; import "../../../../src/components/ha-alert"; -import "../../../../src/components/ha-circular-progress"; +import "../../../../src/components/ha-spinner"; import "../../../../src/components/ha-markdown"; import { customElement, property, state } from "lit/decorators"; import type { HassioAddonDetails } from "../../../../src/data/hassio/addon"; @@ -33,7 +33,7 @@ class HassioAddonDocumentationDashboard extends LitElement { protected render(): TemplateResult { if (!this.addon) { - return html``; + return html``; } return html`
diff --git a/hassio/src/addon-view/hassio-addon-dashboard.ts b/hassio/src/addon-view/hassio-addon-dashboard.ts index f245edd109..dc5cdb5d66 100644 --- a/hassio/src/addon-view/hassio-addon-dashboard.ts +++ b/hassio/src/addon-view/hassio-addon-dashboard.ts @@ -11,7 +11,6 @@ import memoizeOne from "memoize-one"; import { fireEvent } from "../../../src/common/dom/fire_event"; import { navigate } from "../../../src/common/navigate"; import { extractSearchParam } from "../../../src/common/url/search-params"; -import "../../../src/components/ha-circular-progress"; import type { HassioAddonDetails } from "../../../src/data/hassio/addon"; import { fetchAddonInfo, diff --git a/hassio/src/addon-view/info/hassio-addon-info-tab.ts b/hassio/src/addon-view/info/hassio-addon-info-tab.ts index c05a246624..e7d5120665 100644 --- a/hassio/src/addon-view/info/hassio-addon-info-tab.ts +++ b/hassio/src/addon-view/info/hassio-addon-info-tab.ts @@ -1,7 +1,7 @@ import type { CSSResultGroup, TemplateResult } from "lit"; import { css, html, LitElement } from "lit"; import { customElement, property } from "lit/decorators"; -import "../../../../src/components/ha-circular-progress"; +import "../../../../src/components/ha-spinner"; import type { HassioAddonDetails } from "../../../../src/data/hassio/addon"; import type { Supervisor } from "../../../../src/data/supervisor/supervisor"; import { haStyle } from "../../../../src/resources/styles"; @@ -23,7 +23,7 @@ class HassioAddonInfoDashboard extends LitElement { protected render(): TemplateResult { if (!this.addon) { - return html``; + return html``; } return html` diff --git a/hassio/src/addon-view/log/hassio-addon-log-tab.ts b/hassio/src/addon-view/log/hassio-addon-log-tab.ts index 34ce4f4626..2a2e05da05 100644 --- a/hassio/src/addon-view/log/hassio-addon-log-tab.ts +++ b/hassio/src/addon-view/log/hassio-addon-log-tab.ts @@ -6,7 +6,7 @@ import { type TemplateResult, } from "lit"; import { customElement, property, state } from "lit/decorators"; -import "../../../../src/components/ha-circular-progress"; +import "../../../../src/components/ha-spinner"; import type { HassioAddonDetails } from "../../../../src/data/hassio/addon"; import type { Supervisor } from "../../../../src/data/supervisor/supervisor"; import { haStyle } from "../../../../src/resources/styles"; @@ -28,9 +28,7 @@ class HassioAddonLogDashboard extends LitElement { protected render(): TemplateResult { if (!this.addon) { - return html` - - `; + return html` `; } return html`
diff --git a/hassio/src/components/hassio-upload-backup.ts b/hassio/src/components/hassio-upload-backup.ts index 4344204c92..fee23e10a9 100644 --- a/hassio/src/components/hassio-upload-backup.ts +++ b/hassio/src/components/hassio-upload-backup.ts @@ -3,7 +3,6 @@ import type { TemplateResult } from "lit"; import { html, LitElement } from "lit"; import { customElement, property, state } from "lit/decorators"; import { fireEvent } from "../../../src/common/dom/fire_event"; -import "../../../src/components/ha-circular-progress"; import "../../../src/components/ha-file-upload"; import type { HassioBackup } from "../../../src/data/hassio/backup"; import { uploadBackup } from "../../../src/data/hassio/backup"; diff --git a/hassio/src/dialogs/backup/dialog-hassio-backup.ts b/hassio/src/dialogs/backup/dialog-hassio-backup.ts index 55ccb0bec6..7be8b0d1be 100644 --- a/hassio/src/dialogs/backup/dialog-hassio-backup.ts +++ b/hassio/src/dialogs/backup/dialog-hassio-backup.ts @@ -12,6 +12,7 @@ import "../../../../src/components/ha-md-dialog"; import "../../../../src/components/ha-dialog-header"; import "../../../../src/components/buttons/ha-progress-button"; import "../../../../src/components/ha-alert"; +import "../../../../src/components/ha-spinner"; import "../../../../src/components/ha-button"; import "../../../../src/components/ha-button-menu"; import "../../../../src/components/ha-header-bar"; @@ -138,7 +139,7 @@ class HassioBackupDialog ? html`${this._error}` : this._restoringBackup ? html`
- +
` : html` ${this._creatingBackup - ? html`` + ? html`` : html` ${this.moving - ? html` - + ? html`

${this.dialogParams.supervisor.localize( "dialog.datadisk_move.moving_desc" @@ -166,7 +161,7 @@ class HassioDatadiskDialog extends LitElement { ha-select { width: 100%; } - ha-circular-progress { + ha-spinner { display: block; margin: 32px; text-align: center; diff --git a/hassio/src/dialogs/network/dialog-hassio-network.ts b/hassio/src/dialogs/network/dialog-hassio-network.ts index 30ee7db3bd..d30df0f396 100644 --- a/hassio/src/dialogs/network/dialog-hassio-network.ts +++ b/hassio/src/dialogs/network/dialog-hassio-network.ts @@ -10,7 +10,7 @@ import { customElement, property, state } from "lit/decorators"; import { cache } from "lit/directives/cache"; import { fireEvent } from "../../../../src/common/dom/fire_event"; import "../../../../src/components/ha-alert"; -import "../../../../src/components/ha-circular-progress"; +import "../../../../src/components/ha-spinner"; import "../../../../src/components/ha-dialog"; import "../../../../src/components/ha-expansion-panel"; import "../../../../src/components/ha-formfield"; @@ -161,12 +161,8 @@ export class DialogHassioNetwork .disabled=${this._scanning} > ${this._scanning - ? html` - ` + ? html` + ` : this.supervisor.localize("dialog.network.scan_ap")} ${this._accessPoints && @@ -282,8 +278,7 @@ export class DialogHassioNetwork ${this._processing - ? html` - ` + ? html` ` : this.supervisor.localize("common.save")}

`; diff --git a/hassio/src/dialogs/repositories/dialog-hassio-repositories.ts b/hassio/src/dialogs/repositories/dialog-hassio-repositories.ts index 19b348d401..b2b73424eb 100644 --- a/hassio/src/dialogs/repositories/dialog-hassio-repositories.ts +++ b/hassio/src/dialogs/repositories/dialog-hassio-repositories.ts @@ -8,7 +8,7 @@ import { fireEvent } from "../../../../src/common/dom/fire_event"; import { caseInsensitiveStringCompare } from "../../../../src/common/string/compare"; import "../../../../src/components/ha-alert"; import "../../../../src/components/ha-tooltip"; -import "../../../../src/components/ha-circular-progress"; +import "../../../../src/components/ha-spinner"; import { createCloseHeading } from "../../../../src/components/ha-dialog"; import "../../../../src/components/ha-icon-button"; import type { @@ -161,10 +161,7 @@ class HassioRepositoriesDialog extends LitElement { > ${this._processing - ? html`` + ? html`` : this._dialogParams!.supervisor.localize( "dialog.repositories.add" )} @@ -202,7 +199,7 @@ class HassioRepositoriesDialog extends LitElement { margin-inline-start: 8px; margin-inline-end: initial; } - ha-circular-progress { + ha-spinner { display: block; margin: 32px; text-align: center; diff --git a/hassio/src/update-available/update-available-card.ts b/hassio/src/update-available/update-available-card.ts index 4f6c02ae2e..ed15034845 100644 --- a/hassio/src/update-available/update-available-card.ts +++ b/hassio/src/update-available/update-available-card.ts @@ -15,6 +15,7 @@ import "../../../src/components/buttons/ha-progress-button"; import "../../../src/components/ha-alert"; import "../../../src/components/ha-button-menu"; import "../../../src/components/ha-card"; +import "../../../src/components/ha-spinner"; import "../../../src/components/ha-checkbox"; import "../../../src/components/ha-faded"; import "../../../src/components/ha-icon-button"; @@ -192,12 +193,10 @@ class UpdateAvailableCard extends LitElement { ` : nothing} ` - : html` - + >

${this.supervisor.localize("update_available.updating", { name: this._name, @@ -465,7 +464,7 @@ class UpdateAvailableCard extends LitElement { justify-content: space-between; } - ha-circular-progress { + ha-spinner { display: block; margin: 32px; text-align: center; diff --git a/src/components/buttons/ha-progress-button.ts b/src/components/buttons/ha-progress-button.ts index 378b259a3c..7004de32e9 100644 --- a/src/components/buttons/ha-progress-button.ts +++ b/src/components/buttons/ha-progress-button.ts @@ -3,7 +3,7 @@ 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-circular-progress"; +import "../ha-spinner"; import "../ha-svg-icon"; @customElement("ha-progress-button") @@ -35,12 +35,7 @@ export class HaProgressButton extends LitElement { : this._result === "error" ? html`` : this.progress - ? html` - - ` + ? html`` : nothing}

`} diff --git a/src/components/ha-circular-progress.ts b/src/components/ha-circular-progress.ts deleted file mode 100644 index bae2532d01..0000000000 --- a/src/components/ha-circular-progress.ts +++ /dev/null @@ -1,49 +0,0 @@ -import { MdCircularProgress } from "@material/web/progress/circular-progress"; -import type { PropertyValues } from "lit"; -import { css } from "lit"; -import { customElement, property } from "lit/decorators"; - -@customElement("ha-circular-progress") -export class HaCircularProgress extends MdCircularProgress { - @property({ attribute: "aria-label", type: String }) public ariaLabel = - "Loading"; - - @property() public size?: "tiny" | "small" | "medium" | "large"; - - protected updated(changedProps: PropertyValues) { - super.updated(changedProps); - - if (changedProps.has("size")) { - switch (this.size) { - case "tiny": - this.style.setProperty("--md-circular-progress-size", "16px"); - break; - case "small": - this.style.setProperty("--md-circular-progress-size", "28px"); - break; - case "medium": - this.style.setProperty("--md-circular-progress-size", "48px"); - break; - case "large": - this.style.setProperty("--md-circular-progress-size", "68px"); - break; - } - } - } - - static override styles = [ - ...super.styles, - css` - :host { - --md-sys-color-primary: var(--primary-color); - --md-circular-progress-size: 48px; - } - `, - ]; -} - -declare global { - interface HTMLElementTagNameMap { - "ha-circular-progress": HaCircularProgress; - } -} diff --git a/src/components/ha-fade-in.ts b/src/components/ha-fade-in.ts new file mode 100644 index 0000000000..feec6796b7 --- /dev/null +++ b/src/components/ha-fade-in.ts @@ -0,0 +1,19 @@ +import SlAnimation from "@shoelace-style/shoelace/dist/components/animation/animation.component"; +import { customElement, property } from "lit/decorators"; + +@customElement("ha-fade-in") +export class HaFadeIn extends SlAnimation { + @property() public name = "fadeIn"; + + @property() public fill: FillMode = "both"; + + @property({ type: Boolean }) public play = true; + + @property({ type: Number }) public iterations = 1; +} + +declare global { + interface HTMLElementTagNameMap { + "ha-fade-in": HaFadeIn; + } +} diff --git a/src/components/ha-picture-upload.ts b/src/components/ha-picture-upload.ts index ade3d9fa0f..a5edd4fbce 100644 --- a/src/components/ha-picture-upload.ts +++ b/src/components/ha-picture-upload.ts @@ -17,7 +17,6 @@ import type { CropOptions } from "../dialogs/image-cropper-dialog/show-image-cro import { showImageCropperDialog } from "../dialogs/image-cropper-dialog/show-image-cropper-dialog"; import type { HomeAssistant } from "../types"; import "./ha-button"; -import "./ha-circular-progress"; import "./ha-file-upload"; import { showMediaBrowserDialog } from "./media-player/show-media-browser-dialog"; diff --git a/src/components/ha-progress-ring.ts b/src/components/ha-progress-ring.ts new file mode 100644 index 0000000000..b336bb7d8b --- /dev/null +++ b/src/components/ha-progress-ring.ts @@ -0,0 +1,58 @@ +import ProgressRing from "@shoelace-style/shoelace/dist/components/progress-ring/progress-ring.component"; +import progressRingStyles from "@shoelace-style/shoelace/dist/components/progress-ring/progress-ring.styles"; +import { css } from "lit"; +import { customElement, property } from "lit/decorators"; + +@customElement("ha-progress-ring") +export class HaProgressRing extends ProgressRing { + @property() public size?: "tiny" | "small" | "medium" | "large"; + + public updated(changedProps) { + super.updated(changedProps); + + if (changedProps.has("size")) { + switch (this.size) { + case "tiny": + this.style.setProperty("--ha-progress-ring-size", "16px"); + break; + case "small": + this.style.setProperty("--ha-progress-ring-size", "28px"); + break; + case "medium": + this.style.setProperty("--ha-progress-ring-size", "48px"); + break; + case "large": + this.style.setProperty("--ha-progress-ring-size", "68px"); + break; + case undefined: + this.style.removeProperty("--ha-progress-ring-size"); + break; + } + } + } + + static override styles = [ + progressRingStyles, + css` + :host { + --indicator-color: var( + --ha-progress-ring-indicator-color, + var(--primary-color) + ); + --track-color: var( + --ha-progress-ring-divider-color, + var(--divider-color) + ); + --track-width: 4px; + --speed: 3.5s; + --size: var(--ha-progress-ring-size, 48px); + } + `, + ]; +} + +declare global { + interface HTMLElementTagNameMap { + "ha-progress-ring": HaProgressRing; + } +} diff --git a/src/components/ha-spinner.ts b/src/components/ha-spinner.ts new file mode 100644 index 0000000000..2f6842925e --- /dev/null +++ b/src/components/ha-spinner.ts @@ -0,0 +1,56 @@ +import Spinner from "@shoelace-style/shoelace/dist/components/spinner/spinner.component"; +import spinnerStyles from "@shoelace-style/shoelace/dist/components/spinner/spinner.styles"; +import type { PropertyValues } from "lit"; +import { css } from "lit"; +import { customElement, property } from "lit/decorators"; + +@customElement("ha-spinner") +export class HaSpinner extends Spinner { + @property() public size?: "tiny" | "small" | "medium" | "large"; + + protected updated(changedProps: PropertyValues) { + super.updated(changedProps); + + if (changedProps.has("size")) { + switch (this.size) { + case "tiny": + this.style.setProperty("--ha-spinner-size", "16px"); + break; + case "small": + this.style.setProperty("--ha-spinner-size", "28px"); + break; + case "medium": + this.style.setProperty("--ha-spinner-size", "48px"); + break; + case "large": + this.style.setProperty("--ha-spinner-size", "68px"); + break; + case undefined: + this.style.removeProperty("--ha-progress-ring-size"); + break; + } + } + } + + static override styles = [ + spinnerStyles, + css` + :host { + --indicator-color: var( + --ha-spinner-indicator-color, + var(--primary-color) + ); + --track-color: var(--ha-spinner-divider-color, var(--divider-color)); + --track-width: 4px; + --speed: 3.5s; + font-size: var(--ha-spinner-size, 48px); + } + `, + ]; +} + +declare global { + interface HTMLElementTagNameMap { + "ha-spinner": HaSpinner; + } +} diff --git a/src/components/media-player/dialog-media-manage.ts b/src/components/media-player/dialog-media-manage.ts index ce6db78761..b214e36c99 100644 --- a/src/components/media-player/dialog-media-manage.ts +++ b/src/components/media-player/dialog-media-manage.ts @@ -22,7 +22,7 @@ import { haStyleDialog } from "../../resources/styles"; import type { HomeAssistant } from "../../types"; import "../ha-button"; import "../ha-check-list-item"; -import "../ha-circular-progress"; +import "../ha-spinner"; import "../ha-dialog"; import "../ha-dialog-header"; import "../ha-svg-icon"; @@ -151,7 +151,7 @@ class DialogMediaManage extends LitElement { ${!this._currentItem ? html`
- +
` : !children.length diff --git a/src/components/media-player/ha-media-manage-button.ts b/src/components/media-player/ha-media-manage-button.ts index bdbf3a71cb..4eec8d0217 100644 --- a/src/components/media-player/ha-media-manage-button.ts +++ b/src/components/media-player/ha-media-manage-button.ts @@ -62,8 +62,7 @@ class MediaManageButton extends LitElement { --mdc-button-disabled-ink-color: --mdc-theme-primary; } - ha-svg-icon[slot="icon"], - ha-circular-progress[slot="icon"] { + ha-svg-icon[slot="icon"] { vertical-align: middle; } diff --git a/src/components/media-player/ha-media-player-browse.ts b/src/components/media-player/ha-media-player-browse.ts index 58a12fb0de..42eaa9cbcc 100644 --- a/src/components/media-player/ha-media-player-browse.ts +++ b/src/components/media-player/ha-media-player-browse.ts @@ -45,7 +45,7 @@ import "../entity/ha-entity-picker"; import "../ha-alert"; import "../ha-button-menu"; import "../ha-card"; -import "../ha-circular-progress"; +import "../ha-spinner"; import "../ha-fab"; import "../ha-icon-button"; import "../ha-svg-icon"; @@ -325,7 +325,7 @@ export class HaMediaPlayerBrowse extends LitElement { } if (!this._currentItem) { - return html``; + return html``; } const currentItem = this._currentItem; @@ -873,11 +873,8 @@ export class HaMediaPlayerBrowse extends LitElement { direction: ltr; } - ha-circular-progress { - --mdc-theme-primary: var(--primary-color); - display: flex; - justify-content: center; - margin: 40px; + ha-spinner { + margin: 40px auto; } .container { diff --git a/src/components/media-player/ha-media-upload-button.ts b/src/components/media-player/ha-media-upload-button.ts index d5f49c52c1..8922cb4476 100644 --- a/src/components/media-player/ha-media-upload-button.ts +++ b/src/components/media-player/ha-media-upload-button.ts @@ -10,7 +10,7 @@ import { } from "../../data/media_source"; import { showAlertDialog } from "../../dialogs/generic/show-dialog-box"; import type { HomeAssistant } from "../../types"; -import "../ha-circular-progress"; +import "../ha-spinner"; import "../ha-svg-icon"; declare global { @@ -52,12 +52,11 @@ class MediaUploadButton extends LitElement { > ${this._uploading > 0 ? html` - + > ` : html` `} @@ -116,7 +115,7 @@ class MediaUploadButton extends LitElement { } ha-svg-icon[slot="icon"], - ha-circular-progress[slot="icon"] { + ha-spinner[slot="icon"] { vertical-align: middle; } diff --git a/src/dialogs/config-flow/dialog-data-entry-flow.ts b/src/dialogs/config-flow/dialog-data-entry-flow.ts index bf9a66eba6..21b032a9d0 100644 --- a/src/dialogs/config-flow/dialog-data-entry-flow.ts +++ b/src/dialogs/config-flow/dialog-data-entry-flow.ts @@ -6,7 +6,6 @@ import { LitElement, css, html, nothing } from "lit"; import { customElement, property, state } from "lit/decorators"; import type { HASSDomEvent } from "../../common/dom/fire_event"; import { fireEvent } from "../../common/dom/fire_event"; -import "../../components/ha-circular-progress"; import "../../components/ha-dialog"; import "../../components/ha-icon-button"; import type { DataEntryFlowStep } from "../../data/data_entry_flow"; diff --git a/src/dialogs/config-flow/previews/flow-preview-generic_camera.ts b/src/dialogs/config-flow/previews/flow-preview-generic_camera.ts index 03855c6ac3..befa451df8 100644 --- a/src/dialogs/config-flow/previews/flow-preview-generic_camera.ts +++ b/src/dialogs/config-flow/previews/flow-preview-generic_camera.ts @@ -2,7 +2,7 @@ import { html, nothing } from "lit"; import { customElement } from "lit/decorators"; import { FlowPreviewGeneric } from "./flow-preview-generic"; import "../../../components/ha-hls-player"; -import "../../../components/ha-circular-progress"; +import "../../../components/ha-spinner"; @customElement("flow-preview-generic_camera") class FlowPreviewGenericCamera extends FlowPreviewGeneric { @@ -25,12 +25,11 @@ class FlowPreviewGenericCamera extends FlowPreviewGeneric { : ""} ${streamUrl ? html`

Stream:

- + > - +
` : html` diff --git a/src/dialogs/config-flow/step-flow-loading.ts b/src/dialogs/config-flow/step-flow-loading.ts index 450f9d0b12..99d2b05a47 100644 --- a/src/dialogs/config-flow/step-flow-loading.ts +++ b/src/dialogs/config-flow/step-flow-loading.ts @@ -1,7 +1,7 @@ import type { TemplateResult } from "lit"; import { css, html, LitElement } from "lit"; import { customElement, property } from "lit/decorators"; -import "../../components/ha-circular-progress"; +import "../../components/ha-spinner"; import type { DataEntryFlowStep } from "../../data/data_entry_flow"; import type { HomeAssistant } from "../../types"; import type { FlowConfig, LoadingReason } from "./show-dialog-data-entry-flow"; @@ -28,7 +28,7 @@ class StepFlowLoading extends LitElement { return html` `; } @@ -38,7 +38,7 @@ class StepFlowLoading extends LitElement { padding: 50px 100px; text-align: center; } - ha-circular-progress { + ha-spinner { margin-top: 16px; } `; diff --git a/src/dialogs/config-flow/step-flow-progress.ts b/src/dialogs/config-flow/step-flow-progress.ts index 4d6c7364e2..0968478bd0 100644 --- a/src/dialogs/config-flow/step-flow-progress.ts +++ b/src/dialogs/config-flow/step-flow-progress.ts @@ -2,7 +2,7 @@ import "@material/mwc-button"; import type { CSSResultGroup, TemplateResult } from "lit"; import { css, html, LitElement } from "lit"; import { customElement, property } from "lit/decorators"; -import "../../components/ha-circular-progress"; +import "../../components/ha-spinner"; import type { DataEntryFlowStepProgress } from "../../data/data_entry_flow"; import type { HomeAssistant } from "../../types"; import type { FlowConfig } from "./show-dialog-data-entry-flow"; @@ -25,7 +25,7 @@ class StepFlowProgress extends LitElement { ${this.flowConfig.renderShowFormProgressHeader(this.hass, this.step)}
- + ${this.flowConfig.renderShowFormProgressDescription( this.hass, this.step @@ -42,7 +42,7 @@ class StepFlowProgress extends LitElement { padding: 50px 100px; text-align: center; } - ha-circular-progress { + ha-spinner { margin-bottom: 16px; } `, diff --git a/src/dialogs/more-info/controls/more-info-configurator.ts b/src/dialogs/more-info/controls/more-info-configurator.ts index 28c392d4c6..d32e90f112 100644 --- a/src/dialogs/more-info/controls/more-info-configurator.ts +++ b/src/dialogs/more-info/controls/more-info-configurator.ts @@ -3,7 +3,7 @@ import type { HassEntity } from "home-assistant-js-websocket"; import { css, html, LitElement, nothing } from "lit"; import { customElement, property, state } from "lit/decorators"; import "../../../components/ha-alert"; -import "../../../components/ha-circular-progress"; +import "../../../components/ha-spinner"; import "../../../components/ha-markdown"; import "../../../components/ha-textfield"; import type { HomeAssistant } from "../../../types"; @@ -52,10 +52,10 @@ export class MoreInfoConfigurator extends LitElement { @click=${this._submitClicked} > ${this._isConfiguring - ? html`` + >` : ""} ${this.stateObj.attributes.submit_caption} @@ -114,12 +114,10 @@ export class MoreInfoConfigurator extends LitElement { height: 41px; } - ha-circular-progress { - width: 14px; - height: 14px; - margin-right: 20px; - margin-inline-end: 20px; - margin-inline-start: initial; + ha-spinner { + --ha-spinner-indicator-color: var(--primary-text-color); + margin-right: auto; + margin-left: auto; } `; } diff --git a/src/dialogs/more-info/controls/more-info-conversation.ts b/src/dialogs/more-info/controls/more-info-conversation.ts index 6fe8e20c56..595909dd97 100644 --- a/src/dialogs/more-info/controls/more-info-conversation.ts +++ b/src/dialogs/more-info/controls/more-info-conversation.ts @@ -5,7 +5,7 @@ import { customElement, property, state } from "lit/decorators"; import "../../../components/ha-attributes"; import type { HomeAssistant } from "../../../types"; import "../../../components/ha-assist-chat"; -import "../../../components/ha-circular-progress"; +import "../../../components/ha-spinner"; import "../../../components/ha-alert"; import type { AssistPipeline } from "../../../data/assist_pipeline"; import { getAssistPipeline } from "../../../data/assist_pipeline"; @@ -82,10 +82,7 @@ class MoreInfoConversation extends LitElement { > ` : html`
- +
`} `; } diff --git a/src/dialogs/more-info/controls/more-info-update.ts b/src/dialogs/more-info/controls/more-info-update.ts index dea5cf34ec..92aa130012 100644 --- a/src/dialogs/more-info/controls/more-info-update.ts +++ b/src/dialogs/more-info/controls/more-info-update.ts @@ -7,7 +7,7 @@ import { supportsFeature } from "../../../common/entity/supports-feature"; import "../../../components/ha-alert"; import "../../../components/ha-button"; import "../../../components/ha-checkbox"; -import "../../../components/ha-circular-progress"; +import "../../../components/ha-spinner"; import "../../../components/ha-faded"; import "../../../components/ha-formfield"; import "../../../components/ha-markdown"; @@ -307,7 +307,7 @@ class MoreInfoUpdate extends LitElement { private _renderLoader() { return html`
- +
`; } diff --git a/src/dialogs/quick-bar/ha-quick-bar.ts b/src/dialogs/quick-bar/ha-quick-bar.ts index 8d8b1e513c..7c4321f43c 100644 --- a/src/dialogs/quick-bar/ha-quick-bar.ts +++ b/src/dialogs/quick-bar/ha-quick-bar.ts @@ -25,7 +25,7 @@ import { caseInsensitiveStringCompare } from "../../common/string/compare"; import type { ScorableTextItem } from "../../common/string/filter/sequence-matching"; import { fuzzyFilterSort } from "../../common/string/filter/sequence-matching"; import { debounce } from "../../common/util/debounce"; -import "../../components/ha-circular-progress"; +import "../../components/ha-spinner"; import "../../components/ha-icon-button"; import "../../components/ha-label"; import "../../components/ha-list-item"; @@ -237,10 +237,7 @@ export class QuickBar extends LitElement {
${!items - ? html`` + ? html`` : items.length === 0 ? html`
@@ -425,10 +422,9 @@ export class QuickBar extends LitElement { } private _addSpinnerToCommandItem(index: number): void { - const spinner = document.createElement("ha-circular-progress"); + const spinner = document.createElement("ha-spinner"); spinner.size = "small"; spinner.slot = "meta"; - spinner.indeterminate = true; this._getItemAtIndex(index)?.appendChild(spinner); } diff --git a/src/dialogs/restart/dialog-restart.ts b/src/dialogs/restart/dialog-restart.ts index 62526c5b53..728783251b 100644 --- a/src/dialogs/restart/dialog-restart.ts +++ b/src/dialogs/restart/dialog-restart.ts @@ -11,7 +11,7 @@ import { LitElement, css, html, nothing } from "lit"; import { customElement, property, state, query } from "lit/decorators"; import { isComponentLoaded } from "../../common/config/is_component_loaded"; import { fireEvent } from "../../common/dom/fire_event"; -import "../../components/ha-circular-progress"; +import "../../components/ha-spinner"; import "../../components/ha-md-dialog"; import type { HaMdDialog } from "../../components/ha-md-dialog"; import "../../components/ha-md-list"; @@ -103,7 +103,7 @@ class DialogRestart extends LitElement { ${this._loadingHostInfo ? html`
- +
` : html` diff --git a/src/dialogs/tts-try/dialog-tts-try.ts b/src/dialogs/tts-try/dialog-tts-try.ts index 6df6fcdc07..b89077a636 100644 --- a/src/dialogs/tts-try/dialog-tts-try.ts +++ b/src/dialogs/tts-try/dialog-tts-try.ts @@ -11,7 +11,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-circular-progress"; +import "../../components/ha-spinner"; @customElement("dialog-tts-try") export class TTSTryDialog extends LitElement { @@ -83,12 +83,11 @@ export class TTSTryDialog extends LitElement { ${this._loadingExample ? html` - + > ` : html` - ${this._showLoader - ? html`` - : nothing} `} + ${this._showLoader ? html`` : nothing}`}
`; } diff --git a/src/dialogs/voice-assistant-setup/voice-assistant-setup-step-local.ts b/src/dialogs/voice-assistant-setup/voice-assistant-setup-step-local.ts index 04cc0799e9..29abe4b8f2 100644 --- a/src/dialogs/voice-assistant-setup/voice-assistant-setup-step-local.ts +++ b/src/dialogs/voice-assistant-setup/voice-assistant-setup-step-local.ts @@ -5,7 +5,7 @@ import { customElement, property, state } from "lit/decorators"; import { isComponentLoaded } from "../../common/config/is_component_loaded"; import { fireEvent } from "../../common/dom/fire_event"; import { computeDomain } from "../../common/entity/compute_domain"; -import "../../components/ha-circular-progress"; +import "../../components/ha-spinner"; import { createAssistPipeline, listAssistPipelines, @@ -64,7 +64,7 @@ export class HaVoiceAssistantSetupStepLocal extends LitElement { "ui.panel.config.voice_assistants.satellite_wizard.local.secondary" )}

- +

${this._detailState || "Installation can take several minutes"}

` @@ -425,7 +425,7 @@ export class HaVoiceAssistantSetupStepLocal extends LitElement { static styles = [ AssistantSetupStyles, css` - ha-circular-progress { + ha-spinner { margin-top: 24px; margin-bottom: 24px; } diff --git a/src/dialogs/voice-assistant-setup/voice-assistant-setup-step-update.ts b/src/dialogs/voice-assistant-setup/voice-assistant-setup-step-update.ts index 4b562e9a7c..999197139b 100644 --- a/src/dialogs/voice-assistant-setup/voice-assistant-setup-step-update.ts +++ b/src/dialogs/voice-assistant-setup/voice-assistant-setup-step-update.ts @@ -2,7 +2,8 @@ import type { PropertyValues } from "lit"; import { css, html, LitElement, nothing } from "lit"; import { customElement, property } from "lit/decorators"; import { fireEvent } from "../../common/dom/fire_event"; -import "../../components/ha-circular-progress"; +import "../../components/ha-progress-ring"; +import "../../components/ha-spinner"; import { ON, UNAVAILABLE } from "../../data/entity"; import { updateCanInstall, @@ -84,12 +85,13 @@ export class HaVoiceAssistantSetupStepUpdate extends LitElement { "ui.panel.config.voice_assistants.satellite_wizard.update.secondary" )}

- + ${progressIsNumeric + ? html` + + ` + : html``}

${stateObj?.state === UNAVAILABLE ? "Restarting voice assistant" @@ -145,7 +147,8 @@ export class HaVoiceAssistantSetupStepUpdate extends LitElement { static styles = [ AssistantSetupStyles, css` - ha-circular-progress { + ha-progress-ring, + ha-spinner { margin-top: 24px; margin-bottom: 24px; } diff --git a/src/dialogs/voice-assistant-setup/voice-assistant-setup-step-wake-word.ts b/src/dialogs/voice-assistant-setup/voice-assistant-setup-step-wake-word.ts index 6d658bf511..521bd934d0 100644 --- a/src/dialogs/voice-assistant-setup/voice-assistant-setup-step-wake-word.ts +++ b/src/dialogs/voice-assistant-setup/voice-assistant-setup-step-wake-word.ts @@ -5,6 +5,7 @@ import { customElement, property, state } from "lit/decorators"; import memoizeOne from "memoize-one"; import { fireEvent } from "../../common/dom/fire_event"; import "../../components/ha-button"; +import "../../components/ha-spinner"; import "../../components/ha-dialog-header"; import type { AssistSatelliteConfiguration } from "../../data/assist_satellite"; import { interceptWakeWord } from "../../data/assist_satellite"; @@ -93,7 +94,7 @@ export class HaVoiceAssistantSetupStepWakeWord extends LitElement { const entityState = this.hass.states[this.assistEntityId]; if (entityState.state !== "idle") { - return html``; + return html``; } return html`

diff --git a/src/dialogs/voice-command-dialog/ha-voice-command-dialog.ts b/src/dialogs/voice-command-dialog/ha-voice-command-dialog.ts index 111dbcb0b6..60aa04fb11 100644 --- a/src/dialogs/voice-command-dialog/ha-voice-command-dialog.ts +++ b/src/dialogs/voice-command-dialog/ha-voice-command-dialog.ts @@ -19,7 +19,7 @@ import "../../components/ha-icon-button"; import "../../components/ha-list-item"; import "../../components/ha-alert"; import "../../components/ha-assist-chat"; -import "../../components/ha-circular-progress"; +import "../../components/ha-spinner"; import type { AssistPipeline } from "../../data/assist_pipeline"; import { getAssistPipeline, @@ -113,10 +113,7 @@ export class HaVoiceCommandDialog extends LitElement { ${!this._pipelines ? html`
- +
` : this._pipelines?.map( (pipeline) => @@ -180,10 +177,7 @@ export class HaVoiceCommandDialog extends LitElement { ` : html`
- +
`} `; diff --git a/src/layouts/ha-init-page.ts b/src/layouts/ha-init-page.ts index c7967bb37d..84cd396569 100644 --- a/src/layouts/ha-init-page.ts +++ b/src/layouts/ha-init-page.ts @@ -36,7 +36,7 @@ class HaInitPage extends LitElement { ` : html`
- +
${this.migration @@ -70,7 +70,7 @@ class HaInitPage extends LitElement { protected firstUpdated() { this._showProgressIndicatorTimeout = window.setTimeout(() => { - import("../components/ha-circular-progress"); + import("../components/ha-spinner"); }, 5000); this._retryInterval = window.setInterval(() => { diff --git a/src/layouts/hass-loading-screen.ts b/src/layouts/hass-loading-screen.ts index 9da2b42b99..3aa2f5d672 100644 --- a/src/layouts/hass-loading-screen.ts +++ b/src/layouts/hass-loading-screen.ts @@ -1,7 +1,7 @@ import type { CSSResultGroup, TemplateResult } from "lit"; import { css, html, LitElement, nothing } from "lit"; import { customElement, property } from "lit/decorators"; -import "../components/ha-circular-progress"; +import "../components/ha-spinner"; import "../components/ha-icon-button-arrow-prev"; import "../components/ha-menu-button"; import { haStyle } from "../resources/styles"; @@ -40,7 +40,7 @@ class HassLoadingScreen extends LitElement { `}
`}
- + ${this.message ? html`
${this.message}
` : nothing} diff --git a/src/onboarding/onboarding-core-config.ts b/src/onboarding/onboarding-core-config.ts index c3386c4d3a..99ad56d5e3 100644 --- a/src/onboarding/onboarding-core-config.ts +++ b/src/onboarding/onboarding-core-config.ts @@ -6,7 +6,7 @@ import { LOCAL_TIME_ZONE } from "../common/datetime/resolve-time-zone"; import { fireEvent } from "../common/dom/fire_event"; import type { LocalizeFunc } from "../common/translations/localize"; import "../components/ha-alert"; -import "../components/ha-circular-progress"; +import "../components/ha-spinner"; import { COUNTRIES } from "../components/ha-country-picker"; import type { ConfigUpdateValues } from "../data/core"; import { saveCoreConfig } from "../data/core"; @@ -52,7 +52,7 @@ class OnboardingCoreConfig extends LitElement { } if (this._skipCore) { return html`
- +
`; } return html` diff --git a/src/onboarding/onboarding-location.ts b/src/onboarding/onboarding-location.ts index 16a2c92b1f..44bf2fe0ff 100644 --- a/src/onboarding/onboarding-location.ts +++ b/src/onboarding/onboarding-location.ts @@ -13,7 +13,7 @@ import memoizeOne from "memoize-one"; import { fireEvent } from "../common/dom/fire_event"; import type { LocalizeFunc } from "../common/translations/localize"; import "../components/ha-alert"; -import "../components/ha-circular-progress"; +import "../components/ha-spinner"; import "../components/ha-formfield"; import "../components/ha-list-item"; import "../components/ha-radio"; @@ -115,13 +115,7 @@ class OnboardingLocation extends LitElement { > ${this._working - ? html` - - ` + ? html` ` : html` ha-circular-progress { + ha-textfield > ha-spinner { position: relative; left: 12px; inset-inline-start: 12px; diff --git a/src/onboarding/onboarding-restore-backup.ts b/src/onboarding/onboarding-restore-backup.ts index 7881cd7b33..c5c25d360e 100644 --- a/src/onboarding/onboarding-restore-backup.ts +++ b/src/onboarding/onboarding-restore-backup.ts @@ -8,7 +8,7 @@ import "./restore-backup/onboarding-restore-backup-status"; import type { LocalizeFunc } from "../common/translations/localize"; import "../components/ha-card"; import "../components/ha-icon-button-arrow-prev"; -import "../components/ha-circular-progress"; +import "../components/ha-spinner"; import "../components/ha-alert"; import "./onboarding-loading"; import { removeSearchParam } from "../common/url/search-params"; @@ -91,7 +91,7 @@ class OnboardingRestoreBackup extends LitElement { ${ this._view === "loading" ? html`
- +
` : this._view === "upload" ? html` diff --git a/src/onboarding/restore-backup/onboarding-restore-backup-details.ts b/src/onboarding/restore-backup/onboarding-restore-backup-details.ts index 5c5d976d4d..0c0e88524e 100644 --- a/src/onboarding/restore-backup/onboarding-restore-backup-details.ts +++ b/src/onboarding/restore-backup/onboarding-restore-backup-details.ts @@ -1,7 +1,6 @@ import { css, html, LitElement, type CSSResultGroup } from "lit"; import { customElement, property } from "lit/decorators"; import "../../components/ha-card"; -import "../../components/ha-circular-progress"; import "../../components/ha-alert"; import "../../components/ha-button"; import "../../panels/config/backup/components/ha-backup-details-restore"; diff --git a/src/onboarding/restore-backup/onboarding-restore-backup-status.ts b/src/onboarding/restore-backup/onboarding-restore-backup-status.ts index 6ce7ce01b8..7e8389fc92 100644 --- a/src/onboarding/restore-backup/onboarding-restore-backup-status.ts +++ b/src/onboarding/restore-backup/onboarding-restore-backup-status.ts @@ -1,7 +1,7 @@ import { css, html, LitElement, nothing, type CSSResultGroup } from "lit"; import { customElement, property } from "lit/decorators"; import "../../components/ha-card"; -import "../../components/ha-circular-progress"; +import "../../components/ha-spinner"; import "../../components/ha-alert"; import "../../components/ha-button"; import { haStyle } from "../../resources/styles"; @@ -29,7 +29,7 @@ class OnboardingRestoreBackupStatus extends LitElement { ${this.backupInfo.state === "restore_backup" ? html`
- +

${this.localize( diff --git a/src/panels/config/application_credentials/dialog-add-application-credential.ts b/src/panels/config/application_credentials/dialog-add-application-credential.ts index 386298ff4f..d1bba908ee 100644 --- a/src/panels/config/application_credentials/dialog-add-application-credential.ts +++ b/src/panels/config/application_credentials/dialog-add-application-credential.ts @@ -7,7 +7,7 @@ import { customElement, property, state } from "lit/decorators"; import { fireEvent } from "../../../common/dom/fire_event"; import "../../../components/ha-alert"; import "../../../components/ha-button"; -import "../../../components/ha-circular-progress"; +import "../../../components/ha-spinner"; import "../../../components/ha-combo-box"; import { createCloseHeading } from "../../../components/ha-dialog"; import "../../../components/ha-markdown"; @@ -231,7 +231,7 @@ export class DialogAddApplicationCredential extends LitElement { ${this._loading ? html`

` : html` diff --git a/src/panels/config/backup/components/ha-backup-summary-card.ts b/src/panels/config/backup/components/ha-backup-summary-card.ts index 8d76b5dcf5..16dd2bf4bb 100644 --- a/src/panels/config/backup/components/ha-backup-summary-card.ts +++ b/src/panels/config/backup/components/ha-backup-summary-card.ts @@ -9,7 +9,7 @@ import { css, html, LitElement, nothing } from "lit"; import { customElement, property } from "lit/decorators"; import "../../../../components/ha-button"; import "../../../../components/ha-card"; -import "../../../../components/ha-circular-progress"; +import "../../../../components/ha-spinner"; import "../../../../components/ha-icon"; type SummaryStatus = "success" | "error" | "info" | "warning" | "loading"; @@ -41,7 +41,7 @@ class HaBackupSummaryCard extends LitElement {
${this.status === "loading" - ? html`` + ? html`` : html`
@@ -115,8 +115,8 @@ class HaBackupSummaryCard extends LitElement { width: 24px; height: 24px; } - ha-circular-progress { - --md-circular-progress-size: 40px; + ha-spinner { + --ha-spinner-size: 40px; } .content { display: flex; diff --git a/src/panels/config/backup/dialogs/dialog-restore-backup.ts b/src/panels/config/backup/dialogs/dialog-restore-backup.ts index 75371de173..d70e9c5a89 100644 --- a/src/panels/config/backup/dialogs/dialog-restore-backup.ts +++ b/src/panels/config/backup/dialogs/dialog-restore-backup.ts @@ -5,7 +5,7 @@ import { css, html, LitElement, nothing } from "lit"; import { customElement, property, query, state } from "lit/decorators"; import { fireEvent } from "../../../../common/dom/fire_event"; import "../../../../components/ha-button"; -import "../../../../components/ha-circular-progress"; +import "../../../../components/ha-spinner"; import "../../../../components/ha-dialog-header"; import "../../../../components/ha-password-field"; @@ -239,7 +239,7 @@ class DialogRestoreBackup extends LitElement implements HassDialog { private _renderProgress() { return html`
- +

${this.hass.connected ? this._restoreState() @@ -366,7 +366,7 @@ class DialogRestoreBackup extends LitElement implements HassDialog { flex-direction: column; align-items: center; } - ha-circular-progress { + ha-spinner { margin-bottom: 16px; } ha-alert[alert-type="warning"] { diff --git a/src/panels/config/backup/ha-config-backup-backups.ts b/src/panels/config/backup/ha-config-backup-backups.ts index 937bd82749..30af43c705 100644 --- a/src/panels/config/backup/ha-config-backup-backups.ts +++ b/src/panels/config/backup/ha-config-backup-backups.ts @@ -27,7 +27,7 @@ import type { } from "../../../components/data-table/ha-data-table"; import "../../../components/ha-button"; import "../../../components/ha-button-menu"; -import "../../../components/ha-circular-progress"; +import "../../../components/ha-spinner"; import "../../../components/ha-fab"; import "../../../components/ha-filter-states"; import "../../../components/ha-icon"; @@ -456,11 +456,8 @@ class HaConfigBackupBackups extends SubscribeMixin(LitElement) { @click=${this._newBackup} > ${backupInProgress - ? html`

- + ? html`
+
` : html` ` : !this._backup - ? html`` + ? html`` : html` ` : !this.agentId - ? html`` + ? html`` : html` ${CLOUD_AGENT === this.agentId ? html` @@ -358,6 +361,9 @@ class HaConfigBackupDetails extends LitElement { .card-header { padding-bottom: 8px; } + ha-spinner { + margin: 24px auto; + } `; } diff --git a/src/panels/config/backup/ha-config-backup-overview.ts b/src/panels/config/backup/ha-config-backup-overview.ts index c482fd0137..6a4fb1bb68 100644 --- a/src/panels/config/backup/ha-config-backup-overview.ts +++ b/src/panels/config/backup/ha-config-backup-overview.ts @@ -8,7 +8,7 @@ import "../../../components/ha-button"; import "../../../components/ha-button-menu"; import "../../../components/ha-card"; import "../../../components/ha-fab"; -import "../../../components/ha-circular-progress"; +import "../../../components/ha-spinner"; import "../../../components/ha-icon"; import "../../../components/ha-icon-next"; import "../../../components/ha-icon-overflow-menu"; @@ -231,11 +231,8 @@ class HaConfigBackupOverview extends LitElement { @click=${this._newBackup} > ${backupInProgress - ? html`
- + ? html`
+
` : html``} @@ -264,8 +261,11 @@ class HaConfigBackupOverview extends LitElement { padding-left: 0; padding-right: 0; } - ha-circular-progress { - --md-sys-color-primary: var(--mdc-theme-on-secondary); + .loading { + display: flex; + } + ha-spinner { + --ha-spinner-indicator-color: var(--mdc-theme-on-secondary); } `, ]; diff --git a/src/panels/config/blueprint/blueprint-generic-editor.ts b/src/panels/config/blueprint/blueprint-generic-editor.ts index 2c94a46be2..a08e6e7869 100644 --- a/src/panels/config/blueprint/blueprint-generic-editor.ts +++ b/src/panels/config/blueprint/blueprint-generic-editor.ts @@ -5,7 +5,7 @@ import { customElement, property, state } from "lit/decorators"; import { fireEvent } from "../../../common/dom/fire_event"; import "../../../components/ha-blueprint-picker"; import "../../../components/ha-card"; -import "../../../components/ha-circular-progress"; +import "../../../components/ha-spinner"; import "../../../components/ha-markdown"; import "../../../components/ha-selector/ha-selector"; import "../../../components/ha-settings-row"; @@ -77,7 +77,7 @@ export abstract class HaBlueprintGenericEditor extends LitElement { : this.hass.localize( "ui.panel.config.automation.editor.blueprint.no_blueprints" ) - : html``} + : html``}
${this._config.use_blueprint.path diff --git a/src/panels/config/blueprint/dialog-import-blueprint.ts b/src/panels/config/blueprint/dialog-import-blueprint.ts index 51f4444675..b8c306c869 100644 --- a/src/panels/config/blueprint/dialog-import-blueprint.ts +++ b/src/panels/config/blueprint/dialog-import-blueprint.ts @@ -3,7 +3,7 @@ import { mdiOpenInNew } from "@mdi/js"; import { css, html, LitElement, nothing } from "lit"; import { customElement, property, query, state } from "lit/decorators"; import { fireEvent } from "../../../common/dom/fire_event"; -import "../../../components/ha-circular-progress"; +import "../../../components/ha-spinner"; import { createCloseHeading } from "../../../components/ha-dialog"; import "../../../components/ha-expansion-panel"; import "../../../components/ha-markdown"; @@ -159,13 +159,12 @@ class DialogImportBlueprint extends LitElement { .disabled=${this._importing} > ${this._importing - ? html`` + >` : ""} ${this.hass.localize( "ui.panel.config.blueprint.add.import_btn" @@ -179,13 +178,12 @@ class DialogImportBlueprint extends LitElement { .disabled=${this._saving || this._result.validation_errors} > ${this._saving - ? html`` + >` : ""} ${this._result.exists ? this.hass.localize( diff --git a/src/panels/config/cloud/account/cloud-webhooks.ts b/src/panels/config/cloud/account/cloud-webhooks.ts index 1dfa6b2db0..045fa0a825 100644 --- a/src/panels/config/cloud/account/cloud-webhooks.ts +++ b/src/panels/config/cloud/account/cloud-webhooks.ts @@ -3,7 +3,7 @@ import { css, html, LitElement } from "lit"; import { customElement, property, state } from "lit/decorators"; import { isComponentLoaded } from "../../../../common/config/is_component_loaded"; import "../../../../components/ha-card"; -import "../../../../components/ha-circular-progress"; +import "../../../../components/ha-spinner"; import "../../../../components/ha-settings-row"; import "../../../../components/ha-switch"; import type { CloudStatusLoggedIn, CloudWebhook } from "../../../../data/cloud"; @@ -88,9 +88,7 @@ export class CloudWebhooks extends LitElement { ${this._progress.includes(entry.webhook_id) ? html`
- +
` : this._cloudHooks![entry.webhook_id] diff --git a/src/panels/config/cloud/account/dialog-cloud-support-package.ts b/src/panels/config/cloud/account/dialog-cloud-support-package.ts index 920db783a4..33894fbfa4 100644 --- a/src/panels/config/cloud/account/dialog-cloud-support-package.ts +++ b/src/panels/config/cloud/account/dialog-cloud-support-package.ts @@ -6,7 +6,7 @@ import { customElement, property, query, state } from "lit/decorators"; import { fireEvent } from "../../../../common/dom/fire_event"; import "../../../../components/ha-alert"; import "../../../../components/ha-button"; -import "../../../../components/ha-circular-progress"; +import "../../../../components/ha-spinner"; import "../../../../components/ha-dialog-header"; import "../../../../components/ha-markdown-element"; import "../../../../components/ha-md-dialog"; @@ -67,7 +67,7 @@ export class DialogSupportPackage extends LitElement { >` : html`
- + Generating preview...
`} diff --git a/src/panels/config/dashboard/ha-config-updates.ts b/src/panels/config/dashboard/ha-config-updates.ts index df9c9c3904..d0e479dc52 100644 --- a/src/panels/config/dashboard/ha-config-updates.ts +++ b/src/panels/config/dashboard/ha-config-updates.ts @@ -9,7 +9,7 @@ import memoizeOne from "memoize-one"; import { fireEvent } from "../../../common/dom/fire_event"; import "../../../components/entity/state-badge"; import "../../../components/ha-alert"; -import "../../../components/ha-circular-progress"; +import "../../../components/ha-spinner"; import "../../../components/ha-icon-next"; import "../../../components/ha-list-item"; import type { DeviceRegistryEntry } from "../../../data/device_registry"; @@ -103,14 +103,14 @@ class HaConfigUpdates extends SubscribeMixin(LitElement) { )} > ${this.narrow && entity.attributes.in_progress - ? html`` + >` : ""} ${deviceEntry @@ -125,14 +125,13 @@ class HaConfigUpdates extends SubscribeMixin(LitElement) { ${!this.narrow ? entity.attributes.in_progress - ? html`` + >` : html`` : ""} @@ -190,10 +189,10 @@ class HaConfigUpdates extends SubscribeMixin(LitElement) { cursor: pointer; font-size: 16px; } - ha-circular-progress.absolute { + ha-spinner.absolute { position: absolute; - width: 40px; - height: 40px; + width: 28px; + height: 28px; } state-badge.updating { opacity: 0.5; diff --git a/src/panels/config/helpers/dialog-helper-detail.ts b/src/panels/config/helpers/dialog-helper-detail.ts index a3ffc316f0..ceb22dba63 100644 --- a/src/panels/config/helpers/dialog-helper-detail.ts +++ b/src/panels/config/helpers/dialog-helper-detail.ts @@ -6,7 +6,7 @@ import { classMap } from "lit/directives/class-map"; import memoizeOne from "memoize-one"; import { isComponentLoaded } from "../../../common/config/is_component_loaded"; import { dynamicElement } from "../../../common/dom/dynamic-element-directive"; -import "../../../components/ha-circular-progress"; +import "../../../components/ha-spinner"; import { createCloseHeading } from "../../../components/ha-dialog"; import "../../../components/ha-list-item"; import "../../../components/ha-tooltip"; @@ -175,9 +175,7 @@ export class DialogHelperDetail extends LitElement { `} `; } else if (this._loading || this._helperFlows === undefined) { - content = html``; + content = html``; } else { const items = this._filterHelpers( HELPERS, diff --git a/src/panels/config/integrations/dialog-add-integration.ts b/src/panels/config/integrations/dialog-add-integration.ts index 1ace965ebf..66de3b5308 100644 --- a/src/panels/config/integrations/dialog-add-integration.ts +++ b/src/panels/config/integrations/dialog-add-integration.ts @@ -48,6 +48,7 @@ import { loadVirtualizer } from "../../../resources/virtualizer"; import type { HomeAssistant } from "../../../types"; import "./ha-domain-integrations"; import "./ha-integration-list-item"; +import "../../../components/ha-spinner"; import type { AddIntegrationDialogParams } from "./show-add-integration-dialog"; import { showYamlIntegrationDialog } from "./show-add-integration-dialog"; @@ -468,7 +469,7 @@ class AddIntegrationDialog extends LitElement { ` : html`
- +
`} `; } @@ -740,7 +741,7 @@ class AddIntegrationDialog extends LitElement { justify-content: center; align-items: center; } - ha-circular-progress { + ha-spinner { margin: 24px 0; } mwc-list { diff --git a/src/panels/config/integrations/integration-panels/matter/dialog-matter-manage-fabrics.ts b/src/panels/config/integrations/integration-panels/matter/dialog-matter-manage-fabrics.ts index 59126094f8..24b70e0f20 100644 --- a/src/panels/config/integrations/integration-panels/matter/dialog-matter-manage-fabrics.ts +++ b/src/panels/config/integrations/integration-panels/matter/dialog-matter-manage-fabrics.ts @@ -5,7 +5,7 @@ import type { CSSResultGroup } from "lit"; import { LitElement, css, html, nothing } from "lit"; import { customElement, property, state } from "lit/decorators"; import { fireEvent } from "../../../../../common/dom/fire_event"; -import "../../../../../components/ha-circular-progress"; +import "../../../../../components/ha-spinner"; import "../../../../../components/ha-list-item"; import { createCloseHeading } from "../../../../../components/ha-dialog"; import "../../../../../components/ha-qr-code"; @@ -80,7 +80,7 @@ class DialogMatterManageFabrics extends LitElement { )} ` : html`
- +
`} `; diff --git a/src/panels/config/integrations/integration-panels/matter/dialog-matter-open-commissioning-window.ts b/src/panels/config/integrations/integration-panels/matter/dialog-matter-open-commissioning-window.ts index c338bb8d95..72808746d7 100644 --- a/src/panels/config/integrations/integration-panels/matter/dialog-matter-open-commissioning-window.ts +++ b/src/panels/config/integrations/integration-panels/matter/dialog-matter-open-commissioning-window.ts @@ -4,7 +4,7 @@ import type { CSSResultGroup } from "lit"; import { LitElement, css, html, nothing } from "lit"; import { customElement, property, state } from "lit/decorators"; import { fireEvent } from "../../../../../common/dom/fire_event"; -import "../../../../../components/ha-circular-progress"; +import "../../../../../components/ha-spinner"; import { createCloseHeading } from "../../../../../components/ha-dialog"; import "../../../../../components/ha-qr-code"; import { domainToName } from "../../../../../data/integration"; @@ -99,7 +99,7 @@ class DialogMatterOpenCommissioningWindow extends LitElement { : this._status === "started" ? html`
- +

@@ -230,7 +230,7 @@ class DialogMatterOpenCommissioningWindow extends LitElement { text-align: center; } - .flex-container ha-circular-progress, + .flex-container ha-spinner, .flex-container ha-svg-icon { margin-right: 20px; } diff --git a/src/panels/config/integrations/integration-panels/matter/dialog-matter-ping-node.ts b/src/panels/config/integrations/integration-panels/matter/dialog-matter-ping-node.ts index 6cd2f9e42b..1825ea704a 100644 --- a/src/panels/config/integrations/integration-panels/matter/dialog-matter-ping-node.ts +++ b/src/panels/config/integrations/integration-panels/matter/dialog-matter-ping-node.ts @@ -5,7 +5,7 @@ import type { CSSResultGroup } from "lit"; import { css, html, LitElement, nothing } from "lit"; import { customElement, property, state } from "lit/decorators"; import { fireEvent } from "../../../../../common/dom/fire_event"; -import "../../../../../components/ha-circular-progress"; +import "../../../../../components/ha-spinner"; import "../../../../../components/ha-list-item"; import { createCloseHeading } from "../../../../../components/ha-dialog"; import { pingMatterNode } from "../../../../../data/matter"; @@ -92,7 +92,7 @@ class DialogMatterPingNode extends LitElement { : this._status === "started" ? html`

- +

@@ -185,7 +185,7 @@ class DialogMatterPingNode extends LitElement { --mdc-list-side-padding: 0; } - .flex-container ha-circular-progress, + .flex-container ha-spinner, .flex-container ha-svg-icon { margin-right: 20px; } diff --git a/src/panels/config/integrations/integration-panels/matter/dialog-matter-reinterview-node.ts b/src/panels/config/integrations/integration-panels/matter/dialog-matter-reinterview-node.ts index fb23ec0b57..636921dbac 100644 --- a/src/panels/config/integrations/integration-panels/matter/dialog-matter-reinterview-node.ts +++ b/src/panels/config/integrations/integration-panels/matter/dialog-matter-reinterview-node.ts @@ -4,7 +4,7 @@ import type { CSSResultGroup } from "lit"; import { css, html, LitElement, nothing } from "lit"; import { customElement, property, state } from "lit/decorators"; import { fireEvent } from "../../../../../common/dom/fire_event"; -import "../../../../../components/ha-circular-progress"; +import "../../../../../components/ha-spinner"; import { createCloseHeading } from "../../../../../components/ha-dialog"; import { interviewMatterNode } from "../../../../../data/matter"; import { haStyleDialog } from "../../../../../resources/styles"; @@ -62,7 +62,7 @@ class DialogMatterReinterviewNode extends LitElement { : this._status === "started" ? html`

- +

@@ -178,7 +178,7 @@ class DialogMatterReinterviewNode extends LitElement { height: 48px; } - .flex-container ha-circular-progress, + .flex-container ha-spinner, .flex-container ha-svg-icon { margin-right: 20px; } diff --git a/src/panels/config/integrations/integration-panels/matter/matter-add-device/matter-add-device-commissioning.ts b/src/panels/config/integrations/integration-panels/matter/matter-add-device/matter-add-device-commissioning.ts index 4d38d8a694..02d7a8f040 100644 --- a/src/panels/config/integrations/integration-panels/matter/matter-add-device/matter-add-device-commissioning.ts +++ b/src/panels/config/integrations/integration-panels/matter/matter-add-device/matter-add-device-commissioning.ts @@ -2,7 +2,7 @@ import { LitElement, css, html } from "lit"; import { customElement, property } from "lit/decorators"; import type { HomeAssistant } from "../../../../../../types"; import { sharedStyles } from "./matter-add-device-shared-styles"; -import "../../../../../../components/ha-circular-progress"; +import "../../../../../../components/ha-spinner"; @customElement("matter-add-device-commissioning") class MatterAddDeviceCommissioning extends LitElement { @@ -11,10 +11,7 @@ class MatterAddDeviceCommissioning extends LitElement { render() { return html`

- +

${this.hass.localize( "ui.dialogs.matter-add-device.commissioning.note" @@ -33,7 +30,7 @@ class MatterAddDeviceCommissioning extends LitElement { flex-direction: column; text-align: center; } - ha-circular-progress { + ha-spinner { margin-bottom: 24px; } `, diff --git a/src/panels/config/integrations/integration-panels/matter/matter-add-device/matter-add-device-new.ts b/src/panels/config/integrations/integration-panels/matter/matter-add-device/matter-add-device-new.ts index e870c8551c..006450d239 100644 --- a/src/panels/config/integrations/integration-panels/matter/matter-add-device/matter-add-device-new.ts +++ b/src/panels/config/integrations/integration-panels/matter/matter-add-device/matter-add-device-new.ts @@ -1,6 +1,6 @@ import { LitElement, css, html } from "lit"; import { customElement, property } from "lit/decorators"; -import "../../../../../../components/ha-circular-progress"; +import "../../../../../../components/ha-spinner"; import { canCommissionMatterExternal, startExternalCommissioning, @@ -23,10 +23,7 @@ class MatterAddDeviceNew extends LitElement { if (canCommissionMatterExternal(this.hass)) { return html`

- +
`; } diff --git a/src/panels/config/integrations/integration-panels/zha/dialog-zha-reconfigure-device.ts b/src/panels/config/integrations/integration-panels/zha/dialog-zha-reconfigure-device.ts index 635dc5a717..f87b63b895 100644 --- a/src/panels/config/integrations/integration-panels/zha/dialog-zha-reconfigure-device.ts +++ b/src/panels/config/integrations/integration-panels/zha/dialog-zha-reconfigure-device.ts @@ -5,7 +5,7 @@ import type { CSSResultGroup } from "lit"; import { css, html, LitElement, nothing } from "lit"; import { customElement, property, state } from "lit/decorators"; import { fireEvent } from "../../../../../common/dom/fire_event"; -import "../../../../../components/ha-circular-progress"; +import "../../../../../components/ha-spinner"; import { createCloseHeading } from "../../../../../components/ha-dialog"; import "../../../../../components/ha-svg-icon"; import "../../../../../components/ha-tooltip"; @@ -108,7 +108,7 @@ class DialogZHAReconfigureDevice extends LitElement { ${this._status === "started" ? html`
- +

@@ -452,7 +452,7 @@ class DialogZHAReconfigureDevice extends LitElement { height: 48px; } - .flex-container ha-circular-progress, + .flex-container ha-spinner, .flex-container ha-svg-icon { margin-right: 20px; margin-inline-end: 20px; diff --git a/src/panels/config/integrations/integration-panels/zha/zha-add-devices-page.ts b/src/panels/config/integrations/integration-panels/zha/zha-add-devices-page.ts index 4bd0ad9846..9ba02e4124 100644 --- a/src/panels/config/integrations/integration-panels/zha/zha-add-devices-page.ts +++ b/src/panels/config/integrations/integration-panels/zha/zha-add-devices-page.ts @@ -2,7 +2,7 @@ import "@material/mwc-button"; import type { CSSResultGroup, PropertyValues, TemplateResult } from "lit"; import { css, html, LitElement } from "lit"; import { customElement, property, state } from "lit/decorators"; -import "../../../../../components/ha-circular-progress"; +import "../../../../../components/ha-spinner"; import type { ZHADevice } from "../../../../../data/zha"; import { DEVICE_MESSAGE_TYPES, LOG_OUTPUT } from "../../../../../data/zha"; import "../../../../../layouts/hass-tabs-subpage"; @@ -89,10 +89,7 @@ class ZHAAddDevicesPage extends LitElement { "ui.panel.config.zha.add_device_page.spinner" )} - + ` : html`

@@ -237,7 +234,7 @@ class ZHAAddDevicesPage extends LitElement { .error { color: var(--error-color); } - ha-circular-progress { + ha-spinner { margin: 20px; } .searching { diff --git a/src/panels/config/integrations/integration-panels/zha/zha-add-group-page.ts b/src/panels/config/integrations/integration-panels/zha/zha-add-group-page.ts index 60459a0c82..5b7945a2e1 100644 --- a/src/panels/config/integrations/integration-panels/zha/zha-add-group-page.ts +++ b/src/panels/config/integrations/integration-panels/zha/zha-add-group-page.ts @@ -5,7 +5,7 @@ import { customElement, property, state, query } from "lit/decorators"; import type { HASSDomEvent } from "../../../../../common/dom/fire_event"; import { navigate } from "../../../../../common/navigate"; import type { SelectionChangedEvent } from "../../../../../components/data-table/ha-data-table"; -import "../../../../../components/ha-circular-progress"; +import "../../../../../components/ha-spinner"; import type { ZHADeviceEndpoint, ZHAGroup } from "../../../../../data/zha"; import { addGroup, fetchGroupableDevices } from "../../../../../data/zha"; import "../../../../../layouts/hass-subpage"; @@ -105,13 +105,12 @@ export class ZHAAddGroupPage extends LitElement { class="button" > ${this._processingAdd - ? html`` + >` : ""} ${this.hass!.localize( "ui.panel.config.zha.groups.create" diff --git a/src/panels/config/integrations/integration-panels/zha/zha-device-neighbors.ts b/src/panels/config/integrations/integration-panels/zha/zha-device-neighbors.ts index 015dc8ba0f..1ed0760f04 100644 --- a/src/panels/config/integrations/integration-panels/zha/zha-device-neighbors.ts +++ b/src/panels/config/integrations/integration-panels/zha/zha-device-neighbors.ts @@ -7,7 +7,7 @@ import type { DataTableColumnContainer, DataTableRowData, } from "../../../../../components/data-table/ha-data-table"; -import "../../../../../components/ha-circular-progress"; +import "../../../../../components/ha-spinner"; import "../../../../../components/ha-code-editor"; import type { ZHADevice } from "../../../../../data/zha"; import { fetchDevices } from "../../../../../data/zha"; @@ -116,10 +116,7 @@ class ZHADeviceNeighbors extends LitElement { } return html` ${!this._devices - ? html`` + ? html`` : html` ${this._processingRemove - ? html`` + >` : nothing} ${this.hass!.localize( "ui.panel.config.zha.groups.remove_members" @@ -208,11 +207,10 @@ export class ZHAGroupPage extends LitElement { class="button" > ${this._processingAdd - ? html`` + >` : ""} ${this.hass!.localize( "ui.panel.config.zha.groups.add_members" diff --git a/src/panels/config/integrations/integration-panels/zwave_js/capability-controls/zwave_js-capability-control-color-switch.ts b/src/panels/config/integrations/integration-panels/zwave_js/capability-controls/zwave_js-capability-control-color-switch.ts index 69ee23b3f1..b42fd76158 100644 --- a/src/panels/config/integrations/integration-panels/zwave_js/capability-controls/zwave_js-capability-control-color-switch.ts +++ b/src/panels/config/integrations/integration-panels/zwave_js/capability-controls/zwave_js-capability-control-color-switch.ts @@ -4,7 +4,7 @@ import type { DeviceRegistryEntry } from "../../../../../../data/device_registry import type { HomeAssistant } from "../../../../../../types"; import { invokeZWaveCCApi } from "../../../../../../data/zwave_js"; import "../../../../../../components/ha-alert"; -import "../../../../../../components/ha-circular-progress"; +import "../../../../../../components/ha-spinner"; import { extractApiErrorMessage } from "../../../../../../data/hassio/common"; import "./zwave_js-capability-control-multilevel-switch"; @@ -41,7 +41,7 @@ class ZWaveJSCapabilityColorSwitch extends LitElement { return html`${this._error}`; } if (!this._color_components) { - return html``; + return html``; } return this._color_components.map( (color) => diff --git a/src/panels/config/integrations/integration-panels/zwave_js/capability-controls/zwave_js-capability-control-door-lock.ts b/src/panels/config/integrations/integration-panels/zwave_js/capability-controls/zwave_js-capability-control-door-lock.ts index e0fda6c928..b378d306f7 100644 --- a/src/panels/config/integrations/integration-panels/zwave_js/capability-controls/zwave_js-capability-control-door-lock.ts +++ b/src/panels/config/integrations/integration-panels/zwave_js/capability-controls/zwave_js-capability-control-door-lock.ts @@ -11,7 +11,7 @@ import "../../../../../../components/ha-list-item"; import "../../../../../../components/ha-alert"; import "../../../../../../components/ha-switch"; import "../../../../../../components/ha-formfield"; -import "../../../../../../components/ha-circular-progress"; +import "../../../../../../components/ha-spinner"; import type { HaSwitch } from "../../../../../../components/ha-switch"; import type { HaProgressButton } from "../../../../../../components/buttons/ha-progress-button"; import { extractApiErrorMessage } from "../../../../../../data/hassio/common"; @@ -100,7 +100,7 @@ class ZWaveJSCapabilityDoorLock extends LitElement { !this._capabilities || this._currentDoorLockMode === undefined ) { - return html``; + return html``; } const isValid = this._isValid(); diff --git a/src/panels/config/integrations/integration-panels/zwave_js/dialog-zwave_js-add-node.ts b/src/panels/config/integrations/integration-panels/zwave_js/dialog-zwave_js-add-node.ts index f98695425d..2151578fce 100644 --- a/src/panels/config/integrations/integration-panels/zwave_js/dialog-zwave_js-add-node.ts +++ b/src/panels/config/integrations/integration-panels/zwave_js/dialog-zwave_js-add-node.ts @@ -8,7 +8,7 @@ import { ifDefined } from "lit/directives/if-defined"; import { fireEvent } from "../../../../../common/dom/fire_event"; import "../../../../../components/ha-alert"; import type { HaCheckbox } from "../../../../../components/ha-checkbox"; -import "../../../../../components/ha-circular-progress"; +import "../../../../../components/ha-spinner"; import { createCloseHeading } from "../../../../../components/ha-dialog"; import "../../../../../components/ha-checkbox"; import "../../../../../components/ha-formfield"; @@ -146,14 +146,11 @@ class DialogZWaveJSAddNode extends LitElement { > ${this._status === "loading" ? html`
- +
` : this._status === "waiting_for_device" ? html`
- +

${this.hass.localize( "ui.panel.config.zwave_js.add_node.waiting_for_device" @@ -338,9 +335,7 @@ class DialogZWaveJSAddNode extends LitElement { "ui.panel.config.zwave_js.add_node.searching_device" )} - +

${this.hass.localize( "ui.panel.config.zwave_js.add_node.follow_device_instructions" @@ -355,9 +350,7 @@ class DialogZWaveJSAddNode extends LitElement { "ui.panel.config.zwave_js.add_node.searching_device" )} - +

${this.hass.localize( "ui.panel.config.zwave_js.add_node.follow_device_instructions" @@ -409,9 +402,7 @@ class DialogZWaveJSAddNode extends LitElement { : this._status === "interviewing" ? html`

- +

- +

${this.hass.localize( @@ -252,7 +252,7 @@ class DialogZWaveJSRebuildNodeRoutes extends LitElement { } .flex-container ha-svg-icon, - .flex-container ha-circular-progress { + .flex-container ha-spinner { margin-right: 20px; margin-inline-end: 20px; margin-inline-start: initial; diff --git a/src/panels/config/integrations/integration-panels/zwave_js/dialog-zwave_js-reinterview-node.ts b/src/panels/config/integrations/integration-panels/zwave_js/dialog-zwave_js-reinterview-node.ts index b017673484..58edf8fa02 100644 --- a/src/panels/config/integrations/integration-panels/zwave_js/dialog-zwave_js-reinterview-node.ts +++ b/src/panels/config/integrations/integration-panels/zwave_js/dialog-zwave_js-reinterview-node.ts @@ -5,7 +5,7 @@ import type { CSSResultGroup } from "lit"; import { css, html, LitElement, nothing } from "lit"; import { customElement, property, state } from "lit/decorators"; import { fireEvent } from "../../../../../common/dom/fire_event"; -import "../../../../../components/ha-circular-progress"; +import "../../../../../components/ha-spinner"; import { createCloseHeading } from "../../../../../components/ha-dialog"; import { reinterviewZwaveNode } from "../../../../../data/zwave_js"; import { haStyleDialog } from "../../../../../resources/styles"; @@ -69,7 +69,7 @@ class DialogZWaveJSReinterviewNode extends LitElement { ${this._status === "started" ? html`

- +

@@ -234,7 +234,7 @@ class DialogZWaveJSReinterviewNode extends LitElement { height: 48px; } - .flex-container ha-circular-progress, + .flex-container ha-spinner, .flex-container ha-svg-icon { margin-right: 20px; margin-inline-end: 20px; diff --git a/src/panels/config/integrations/integration-panels/zwave_js/dialog-zwave_js-remove-failed-node.ts b/src/panels/config/integrations/integration-panels/zwave_js/dialog-zwave_js-remove-failed-node.ts index 2732d0778c..e5b46004a1 100644 --- a/src/panels/config/integrations/integration-panels/zwave_js/dialog-zwave_js-remove-failed-node.ts +++ b/src/panels/config/integrations/integration-panels/zwave_js/dialog-zwave_js-remove-failed-node.ts @@ -5,7 +5,7 @@ import type { CSSResultGroup } from "lit"; import { css, html, LitElement, nothing } from "lit"; import { customElement, property, state } from "lit/decorators"; import { fireEvent } from "../../../../../common/dom/fire_event"; -import "../../../../../components/ha-circular-progress"; +import "../../../../../components/ha-spinner"; import { createCloseHeading } from "../../../../../components/ha-dialog"; import type { ZWaveJSRemovedNode } from "../../../../../data/zwave_js"; import { removeFailedZwaveNode } from "../../../../../data/zwave_js"; @@ -90,7 +90,7 @@ class DialogZWaveJSRemoveFailedNode extends LitElement { ${this._status === "started" ? html`

- +

@@ -216,7 +216,7 @@ class DialogZWaveJSRemoveFailedNode extends LitElement { height: 48px; } - .flex-container ha-circular-progress, + .flex-container ha-spinner, .flex-container ha-svg-icon { margin-right: 20px; margin-inline-end: 20px; diff --git a/src/panels/config/integrations/integration-panels/zwave_js/dialog-zwave_js-remove-node.ts b/src/panels/config/integrations/integration-panels/zwave_js/dialog-zwave_js-remove-node.ts index 6e11b0e69d..581b59ba0e 100644 --- a/src/panels/config/integrations/integration-panels/zwave_js/dialog-zwave_js-remove-node.ts +++ b/src/panels/config/integrations/integration-panels/zwave_js/dialog-zwave_js-remove-node.ts @@ -5,7 +5,7 @@ import { css, html, LitElement, nothing } from "lit"; import { customElement, property, state } from "lit/decorators"; import type { UnsubscribeFunc } from "home-assistant-js-websocket"; import { fireEvent } from "../../../../../common/dom/fire_event"; -import "../../../../../components/ha-circular-progress"; +import "../../../../../components/ha-spinner"; import "../../../../../components/ha-alert"; import { createCloseHeading } from "../../../../../components/ha-dialog"; import { haStyleDialog } from "../../../../../resources/styles"; @@ -82,7 +82,7 @@ class DialogZWaveJSRemoveNode extends LitElement { ${this._status === "started" ? html`

- +

${this._status === "disconnected" - ? html`` + ? html`` : html` ` - : html` - - `} + : html` `}

diff --git a/src/panels/config/integrations/integration-panels/zwave_js/zwave_js-custom-param.ts b/src/panels/config/integrations/integration-panels/zwave_js/zwave_js-custom-param.ts index d7aded1985..979edde420 100644 --- a/src/panels/config/integrations/integration-panels/zwave_js/zwave_js-custom-param.ts +++ b/src/panels/config/integrations/integration-panels/zwave_js/zwave_js-custom-param.ts @@ -4,7 +4,7 @@ import { mdiCloseCircle } from "@mdi/js"; import "../../../../../components/ha-textfield"; import "../../../../../components/ha-select"; import "../../../../../components/ha-button"; -import "../../../../../components/ha-circular-progress"; +import "../../../../../components/ha-spinner"; import "../../../../../components/ha-list-item"; import type { HomeAssistant } from "../../../../../types"; import { @@ -91,9 +91,7 @@ class ZWaveJSCustomParam extends LitElement {

- ${this._isLoading - ? html`` - : nothing} + ${this._isLoading ? html`` : nothing} ${this.hass.localize( "ui.panel.config.zwave_js.node_config.get_value" diff --git a/src/panels/config/logs/error-log-card.ts b/src/panels/config/logs/error-log-card.ts index 64f08bea6b..395eed7a7e 100644 --- a/src/panels/config/logs/error-log-card.ts +++ b/src/panels/config/logs/error-log-card.ts @@ -34,7 +34,7 @@ import "../../../components/ha-card"; import "../../../components/ha-button"; import "../../../components/ha-icon-button"; import "../../../components/ha-svg-icon"; -import "../../../components/ha-circular-progress"; +import "../../../components/ha-spinner"; import "../../../components/chips/ha-assist-chip"; import "../../../components/ha-menu"; import "../../../components/ha-md-menu-item"; @@ -284,9 +284,7 @@ class ErrorLogCard extends LitElement {
${this._loadingPrevState === "loading" ? html`
- +
` : nothing} ${this._loadingState === "loading" diff --git a/src/panels/config/logs/system-log-card.ts b/src/panels/config/logs/system-log-card.ts index 1bf51d07a8..23841bdc20 100644 --- a/src/panels/config/logs/system-log-card.ts +++ b/src/panels/config/logs/system-log-card.ts @@ -9,7 +9,7 @@ import "../../../components/buttons/ha-call-service-button"; import "../../../components/buttons/ha-progress-button"; import "../../../components/ha-button-menu"; import "../../../components/ha-card"; -import "../../../components/ha-circular-progress"; +import "../../../components/ha-spinner"; import "../../../components/ha-icon-button"; import "../../../components/ha-list-item"; import { getSignedPath } from "../../../data/auth"; @@ -102,7 +102,7 @@ export class SystemLogCard extends LitElement { ${this._items === undefined ? html`
- +
` : html` diff --git a/src/panels/config/network/supervisor-hostname.ts b/src/panels/config/network/supervisor-hostname.ts index 7c3d914aab..d359e0031c 100644 --- a/src/panels/config/network/supervisor-hostname.ts +++ b/src/panels/config/network/supervisor-hostname.ts @@ -6,7 +6,7 @@ import { css, html, LitElement, nothing } from "lit"; import { customElement, property, state } from "lit/decorators"; import "../../../components/ha-alert"; import "../../../components/ha-card"; -import "../../../components/ha-circular-progress"; +import "../../../components/ha-spinner"; import "../../../components/ha-expansion-panel"; import "../../../components/ha-formfield"; import "../../../components/ha-icon-button"; @@ -70,8 +70,7 @@ export class HassioHostname extends LitElement {
${this._processing - ? html` - ` + ? html`` : this.hass.localize("ui.common.save")}
diff --git a/src/panels/config/network/supervisor-network.ts b/src/panels/config/network/supervisor-network.ts index 6141ae5d59..93d03c7db9 100644 --- a/src/panels/config/network/supervisor-network.ts +++ b/src/panels/config/network/supervisor-network.ts @@ -9,7 +9,7 @@ import "../../../components/ha-alert"; import "../../../components/ha-button"; import "../../../components/ha-button-menu"; import "../../../components/ha-card"; -import "../../../components/ha-circular-progress"; +import "../../../components/ha-spinner"; import "../../../components/ha-expansion-panel"; import "../../../components/ha-formfield"; import "../../../components/ha-icon-button"; @@ -146,8 +146,7 @@ export class HassioNetwork extends LitElement { .disabled=${this._scanning} > ${this._scanning - ? html` - ` + ? html` ` : this.hass.localize( "ui.panel.config.network.supervisor.scan_ap" )} @@ -263,8 +262,7 @@ export class HassioNetwork extends LitElement {
${this._processing - ? html` - ` + ? html`` : this.hass.localize("ui.common.save")} diff --git a/src/panels/config/repairs/dialog-system-information.ts b/src/panels/config/repairs/dialog-system-information.ts index fccbedee52..b9666b0c57 100644 --- a/src/panels/config/repairs/dialog-system-information.ts +++ b/src/panels/config/repairs/dialog-system-information.ts @@ -10,7 +10,7 @@ import { copyToClipboard } from "../../../common/util/copy-clipboard"; import { subscribePollingCollection } from "../../../common/util/subscribe-polling"; import "../../../components/ha-alert"; import "../../../components/ha-card"; -import "../../../components/ha-circular-progress"; +import "../../../components/ha-spinner"; import { createCloseHeading } from "../../../components/ha-dialog"; import "../../../components/ha-metric"; import type { HassioStats } from "../../../data/hassio/common"; @@ -295,7 +295,7 @@ class DialogSystemInformation extends LitElement { if (!this._systemInfo) { sections.push(html`
- +
`); } else { @@ -314,12 +314,7 @@ class DialogSystemInformation extends LitElement { const info = domainInfo.info[key] as SystemCheckValueObject; if (info.type === "pending") { - value = html` - - `; + value = html` `; } else if (info.type === "failed") { value = html` ${info.error}${!info.more_info diff --git a/src/panels/config/storage/dialog-move-datadisk.ts b/src/panels/config/storage/dialog-move-datadisk.ts index 7e0b17f93f..e67cb48a01 100644 --- a/src/panels/config/storage/dialog-move-datadisk.ts +++ b/src/panels/config/storage/dialog-move-datadisk.ts @@ -5,7 +5,7 @@ import { customElement, property, state } from "lit/decorators"; import memoizeOne from "memoize-one"; import { fireEvent } from "../../../common/dom/fire_event"; import { stopPropagation } from "../../../common/dom/stop_propagation"; -import "../../../components/ha-circular-progress"; +import "../../../components/ha-spinner"; import "../../../components/ha-select"; import "../../../components/ha-dialog"; import { @@ -109,12 +109,7 @@ class MoveDatadiskDialog extends LitElement { > ${this._moving ? html` - - +

${this.hass.localize( "ui.panel.config.storage.datadisk.moving_desc" @@ -207,7 +202,7 @@ class MoveDatadiskDialog extends LitElement { ha-select { width: 100%; } - ha-circular-progress { + ha-spinner { display: block; margin: 32px; text-align: center; diff --git a/src/panels/config/users/dialog-add-user.ts b/src/panels/config/users/dialog-add-user.ts index 2c490b03e0..9611cbe49d 100644 --- a/src/panels/config/users/dialog-add-user.ts +++ b/src/panels/config/users/dialog-add-user.ts @@ -3,7 +3,7 @@ import { LitElement, css, html, nothing } from "lit"; import { customElement, property, state } from "lit/decorators"; import "../../../components/ha-alert"; import "../../../components/ha-button"; -import "../../../components/ha-circular-progress"; +import "../../../components/ha-spinner"; import { createCloseHeading } from "../../../components/ha-dialog"; import "../../../components/ha-formfield"; import "../../../components/ha-icon-button"; @@ -194,7 +194,7 @@ export class DialogAddUser extends LitElement { ${this._loading ? html`

` : html` diff --git a/src/panels/config/voice-assistants/debug/assist-render-pipeline-run.ts b/src/panels/config/voice-assistants/debug/assist-render-pipeline-run.ts index 92f6d8b17c..e3bb6ef500 100644 --- a/src/panels/config/voice-assistants/debug/assist-render-pipeline-run.ts +++ b/src/panels/config/voice-assistants/debug/assist-render-pipeline-run.ts @@ -4,7 +4,7 @@ import { customElement, property } from "lit/decorators"; import "../../../../components/ha-card"; import "../../../../components/ha-alert"; import "../../../../components/ha-button"; -import "../../../../components/ha-circular-progress"; +import "../../../../components/ha-spinner"; import "../../../../components/ha-expansion-panel"; import type { PipelineRun } from "../../../../data/assist_pipeline"; import type { HomeAssistant } from "../../../../types"; @@ -90,9 +90,7 @@ const renderProgress = ( if ("error" in pipelineRun) { return html`❌`; } - return html` - - `; + return html` `; } const duration = diff --git a/src/panels/developer-tools/statistics/dialog-statistics-adjust-sum.ts b/src/panels/developer-tools/statistics/dialog-statistics-adjust-sum.ts index 47705baf77..b1647f4c0a 100644 --- a/src/panels/developer-tools/statistics/dialog-statistics-adjust-sum.ts +++ b/src/panels/developer-tools/statistics/dialog-statistics-adjust-sum.ts @@ -6,7 +6,7 @@ import { customElement, property, state } from "lit/decorators"; import memoizeOne from "memoize-one"; import { formatDateTime } from "../../../common/datetime/format_date_time"; import { fireEvent } from "../../../common/dom/fire_event"; -import "../../../components/ha-circular-progress"; +import "../../../components/ha-spinner"; import "../../../components/ha-dialog"; import "../../../components/ha-form/ha-form"; import "../../../components/ha-icon-next"; @@ -129,7 +129,7 @@ export class DialogStatisticsFixUnsupportedUnitMetadata extends LitElement { let stats: TemplateResult; if (!this._stats5min || !this._statsHour) { - stats = html``; + stats = html``; } else if (this._statsHour.length < 1 && this._stats5min.length < 1) { stats = html`

${this.hass.localize( @@ -526,7 +526,7 @@ export class DialogStatisticsFixUnsupportedUnitMetadata extends LitElement { display: flex; flex-direction: column; } - .stat-list ha-circular-progress { + .stat-list ha-spinner { margin: 0 auto; } `, diff --git a/src/panels/developer-tools/statistics/dialog-statistics-fix.ts b/src/panels/developer-tools/statistics/dialog-statistics-fix.ts index 7c1b74abca..02264cd97e 100644 --- a/src/panels/developer-tools/statistics/dialog-statistics-fix.ts +++ b/src/panels/developer-tools/statistics/dialog-statistics-fix.ts @@ -2,7 +2,7 @@ import "@material/mwc-button/mwc-button"; import type { CSSResultGroup } from "lit"; import { html, LitElement, nothing } from "lit"; import { customElement, property, state } from "lit/decorators"; -import "../../../components/ha-circular-progress"; +import "../../../components/ha-spinner"; import { fireEvent } from "../../../common/dom/fire_event"; import "../../../components/ha-dialog"; import { clearStatistics, getStatisticLabel } from "../../../data/recorder"; @@ -139,11 +139,10 @@ export class DialogStatisticsFix extends LitElement { .disabled=${this._clearing} > ${this._clearing - ? html`` + >` : nothing} ${this.hass.localize("ui.common.delete")} diff --git a/src/panels/developer-tools/template/developer-tools-template.ts b/src/panels/developer-tools/template/developer-tools-template.ts index a817c828ce..3d24a0037c 100644 --- a/src/panels/developer-tools/template/developer-tools-template.ts +++ b/src/panels/developer-tools/template/developer-tools-template.ts @@ -6,7 +6,7 @@ import { customElement, property, state } from "lit/decorators"; import { classMap } from "lit/directives/class-map"; import { debounce } from "../../../common/util/debounce"; import "../../../components/ha-alert"; -import "../../../components/ha-circular-progress"; +import "../../../components/ha-spinner"; import "../../../components/ha-code-editor"; import "../../../components/ha-card"; import type { RenderTemplateResult } from "../../../data/ws-templates"; @@ -168,11 +168,10 @@ class HaPanelDevTemplate extends LitElement { >

${this._rendering - ? html`` + >` : ""} ${this._error ? html` - +
` : nothing : html` diff --git a/src/panels/history/ha-panel-history.ts b/src/panels/history/ha-panel-history.ts index 62c913539b..313529a5a7 100644 --- a/src/panels/history/ha-panel-history.ts +++ b/src/panels/history/ha-panel-history.ts @@ -27,7 +27,7 @@ import { import { MIN_TIME_BETWEEN_UPDATES } from "../../components/chart/ha-chart-base"; import "../../components/chart/state-history-charts"; import type { StateHistoryCharts } from "../../components/chart/state-history-charts"; -import "../../components/ha-circular-progress"; +import "../../components/ha-spinner"; import "../../components/ha-date-range-picker"; import "../../components/ha-icon-button"; import "../../components/ha-button-menu"; @@ -185,7 +185,7 @@ class HaPanelHistory extends LitElement {
${this._isLoading ? html`
- +
` : !entitiesSelected ? html`
diff --git a/src/panels/logbook/ha-logbook-renderer.ts b/src/panels/logbook/ha-logbook-renderer.ts index bf13990400..9bf41caf3e 100644 --- a/src/panels/logbook/ha-logbook-renderer.ts +++ b/src/panels/logbook/ha-logbook-renderer.ts @@ -14,7 +14,6 @@ import { computeDomain } from "../../common/entity/compute_domain"; import { navigate } from "../../common/navigate"; import { computeTimelineColor } from "../../components/chart/timeline-color"; import "../../components/entity/state-badge"; -import "../../components/ha-circular-progress"; import "../../components/ha-icon-next"; import "../../components/ha-relative-time"; import type { LogbookEntry } from "../../data/logbook"; diff --git a/src/panels/logbook/ha-logbook.ts b/src/panels/logbook/ha-logbook.ts index a22cc4111a..b39f10652b 100644 --- a/src/panels/logbook/ha-logbook.ts +++ b/src/panels/logbook/ha-logbook.ts @@ -4,7 +4,7 @@ import { customElement, property, state } from "lit/decorators"; import { isComponentLoaded } from "../../common/config/is_component_loaded"; import { computeStateDomain } from "../../common/entity/compute_state_domain"; import { throttle } from "../../common/util/throttle"; -import "../../components/ha-circular-progress"; +import "../../components/ha-spinner"; import type { LogbookEntry, LogbookStreamMessage } from "../../data/logbook"; import { subscribeLogbook } from "../../data/logbook"; import type { TraceContexts } from "../../data/trace"; @@ -103,7 +103,7 @@ export class HaLogbook extends LitElement { if (this._logbookEntries === undefined) { return html`
- +
`; } diff --git a/src/panels/lovelace/cards/hui-starting-card.ts b/src/panels/lovelace/cards/hui-starting-card.ts index bb8c9d3980..6ae7f66286 100644 --- a/src/panels/lovelace/cards/hui-starting-card.ts +++ b/src/panels/lovelace/cards/hui-starting-card.ts @@ -5,7 +5,7 @@ import { css, html, LitElement, nothing } from "lit"; import { customElement, property } from "lit/decorators"; import { fireEvent } from "../../../common/dom/fire_event"; import "../../../components/ha-card"; -import "../../../components/ha-circular-progress"; +import "../../../components/ha-spinner"; import type { LovelaceCardConfig } from "../../../data/lovelace/config/card"; import type { HomeAssistant } from "../../../types"; import type { LovelaceCard } from "../types"; @@ -39,7 +39,7 @@ export class HuiStartingCard extends LitElement implements LovelaceCard { return html`
- + ${this.hass.localize("ui.panel.lovelace.cards.starting.description")}
`; @@ -50,7 +50,7 @@ export class HuiStartingCard extends LitElement implements LovelaceCard { display: block; height: calc(100vh - var(--header-height)); } - ha-circular-progress { + ha-spinner { margin-bottom: 20px; } .content { diff --git a/src/panels/lovelace/components/hui-image.ts b/src/panels/lovelace/components/hui-image.ts index 7766446567..1cf23eb329 100644 --- a/src/panels/lovelace/components/hui-image.ts +++ b/src/panels/lovelace/components/hui-image.ts @@ -8,7 +8,7 @@ import { computeDomain } from "../../../common/entity/compute_domain"; import parseAspectRatio from "../../../common/util/parse-aspect-ratio"; import "../../../components/ha-camera-stream"; import type { HaCameraStream } from "../../../components/ha-camera-stream"; -import "../../../components/ha-circular-progress"; +import "../../../components/ha-spinner"; import type { CameraEntity } from "../../../data/camera"; import { fetchThumbnailUrlWithCache } from "../../../data/camera"; import { UNAVAILABLE } from "../../../data/entity"; @@ -256,11 +256,7 @@ export class HuiImage extends LitElement { : undefined, })} > - +
` : ""}
diff --git a/src/panels/lovelace/editor/badge-editor/hui-badge-picker.ts b/src/panels/lovelace/editor/badge-editor/hui-badge-picker.ts index 9124bbb6ed..1e720a4632 100644 --- a/src/panels/lovelace/editor/badge-editor/hui-badge-picker.ts +++ b/src/panels/lovelace/editor/badge-editor/hui-badge-picker.ts @@ -10,7 +10,7 @@ import memoizeOne from "memoize-one"; import { storage } from "../../../../common/decorators/storage"; import { fireEvent } from "../../../../common/dom/fire_event"; import { stringCompare } from "../../../../common/string/compare"; -import "../../../../components/ha-circular-progress"; +import "../../../../components/ha-spinner"; import "../../../../components/search-input"; import { isUnavailableState } from "../../../../data/entity"; import type { LovelaceBadgeConfig } from "../../../../data/lovelace/config/badge"; @@ -296,7 +296,7 @@ export class HuiBadgePicker extends LitElement { this._renderBadgeElement(badge), html` ` )}`, @@ -328,7 +328,7 @@ export class HuiBadgePicker extends LitElement { ), html` ` )}`; diff --git a/src/panels/lovelace/editor/badge-editor/hui-dialog-edit-badge.ts b/src/panels/lovelace/editor/badge-editor/hui-dialog-edit-badge.ts index 5b3122fa34..16175b9ea5 100644 --- a/src/panels/lovelace/editor/badge-editor/hui-dialog-edit-badge.ts +++ b/src/panels/lovelace/editor/badge-editor/hui-dialog-edit-badge.ts @@ -6,7 +6,7 @@ import { customElement, property, query, state } from "lit/decorators"; import type { HASSDomEvent } from "../../../../common/dom/fire_event"; import { fireEvent } from "../../../../common/dom/fire_event"; import { computeRTLDirection } from "../../../../common/util/compute_rtl"; -import "../../../../components/ha-circular-progress"; +import "../../../../components/ha-spinner"; import "../../../../components/ha-dialog"; import "../../../../components/ha-dialog-header"; import "../../../../components/ha-icon-button"; @@ -245,10 +245,10 @@ export class HuiDialogEditBadge > ${this._error ? html` - + > ` : ``}
@@ -281,11 +281,10 @@ export class HuiDialogEditBadge > ${this._saving ? html` - + > ` : this.hass!.localize("ui.common.save")} @@ -480,9 +479,9 @@ export class HuiDialogEditBadge justify-content: center; align-items: center; } - .element-preview ha-circular-progress { - top: 50%; - left: 50%; + .element-preview ha-spinner { + top: calc(50% - 14px); + left: calc(50% - 14px); position: absolute; z-index: 10; } diff --git a/src/panels/lovelace/editor/badge-editor/hui-dialog-suggest-badge.ts b/src/panels/lovelace/editor/badge-editor/hui-dialog-suggest-badge.ts index b251933852..c6fbba1387 100644 --- a/src/panels/lovelace/editor/badge-editor/hui-dialog-suggest-badge.ts +++ b/src/panels/lovelace/editor/badge-editor/hui-dialog-suggest-badge.ts @@ -4,6 +4,7 @@ import { css, html, LitElement, nothing } from "lit"; import { customElement, property, query, state } from "lit/decorators"; import { fireEvent } from "../../../../common/dom/fire_event"; import "../../../../components/ha-yaml-editor"; +import "../../../../components/ha-spinner"; import type { HaYamlEditor } from "../../../../components/ha-yaml-editor"; import type { LovelaceBadgeConfig } from "../../../../data/lovelace/config/badge"; @@ -109,11 +110,7 @@ export class HuiDialogSuggestBadge extends LitElement { > ${this._saving ? html` - + ` : this.hass!.localize( "ui.panel.lovelace.editor.suggest_badge.add" diff --git a/src/panels/lovelace/editor/card-editor/hui-card-picker.ts b/src/panels/lovelace/editor/card-editor/hui-card-picker.ts index 4378962553..392e49d6fd 100644 --- a/src/panels/lovelace/editor/card-editor/hui-card-picker.ts +++ b/src/panels/lovelace/editor/card-editor/hui-card-picker.ts @@ -10,7 +10,7 @@ import memoizeOne from "memoize-one"; import { storage } from "../../../../common/decorators/storage"; import { fireEvent } from "../../../../common/dom/fire_event"; import { stringCompare } from "../../../../common/string/compare"; -import "../../../../components/ha-circular-progress"; +import "../../../../components/ha-spinner"; import "../../../../components/search-input"; import { isUnavailableState } from "../../../../data/entity"; import type { LovelaceCardConfig } from "../../../../data/lovelace/config/card"; @@ -313,7 +313,7 @@ export class HuiCardPicker extends LitElement { this._renderCardElement(card), html` ` )}`, @@ -345,7 +345,7 @@ export class HuiCardPicker extends LitElement { ), html` ` )}`; diff --git a/src/panels/lovelace/editor/card-editor/hui-dialog-edit-card.ts b/src/panels/lovelace/editor/card-editor/hui-dialog-edit-card.ts index 4e2b8d88f4..e2e5aebd4e 100644 --- a/src/panels/lovelace/editor/card-editor/hui-dialog-edit-card.ts +++ b/src/panels/lovelace/editor/card-editor/hui-dialog-edit-card.ts @@ -7,7 +7,7 @@ import memoizeOne from "memoize-one"; import type { HASSDomEvent } from "../../../../common/dom/fire_event"; import { fireEvent } from "../../../../common/dom/fire_event"; import { computeRTLDirection } from "../../../../common/util/compute_rtl"; -import "../../../../components/ha-circular-progress"; +import "../../../../components/ha-spinner"; import "../../../../components/ha-dialog"; import "../../../../components/ha-dialog-header"; import "../../../../components/ha-icon-button"; @@ -236,12 +236,7 @@ export class HuiDialogEditCard > `} ${this._error - ? html` - - ` + ? html` ` : ``}
@@ -273,11 +268,10 @@ export class HuiDialogEditCard > ${this._saving ? html` - + > ` : this.hass!.localize("ui.common.save")} @@ -502,9 +496,9 @@ export class HuiDialogEditCard position: sticky; top: 0; } - .element-preview ha-circular-progress { - top: 50%; - left: 50%; + .element-preview ha-spinner { + top: calc(50% - 24px); + left: calc(50% - 24px); position: absolute; z-index: 10; } diff --git a/src/panels/lovelace/editor/card-editor/hui-dialog-suggest-card.ts b/src/panels/lovelace/editor/card-editor/hui-dialog-suggest-card.ts index 0bc13d0a11..664eaf6f29 100644 --- a/src/panels/lovelace/editor/card-editor/hui-dialog-suggest-card.ts +++ b/src/panels/lovelace/editor/card-editor/hui-dialog-suggest-card.ts @@ -6,6 +6,7 @@ import { fireEvent } from "../../../../common/dom/fire_event"; import "../../../../components/ha-yaml-editor"; import type { HaYamlEditor } from "../../../../components/ha-yaml-editor"; +import "../../../../components/ha-spinner"; import type { LovelaceCardConfig } from "../../../../data/lovelace/config/card"; import type { LovelaceSectionConfig } from "../../../../data/lovelace/config/section"; import type { LovelaceConfig } from "../../../../data/lovelace/config/types"; @@ -150,11 +151,7 @@ export class HuiDialogSuggestCard extends LitElement { > ${this._saving ? html` - + ` : this.hass!.localize( "ui.panel.lovelace.editor.suggest_card.add" diff --git a/src/panels/lovelace/editor/hui-dialog-save-config.ts b/src/panels/lovelace/editor/hui-dialog-save-config.ts index f25237bae0..cc0faf67a3 100644 --- a/src/panels/lovelace/editor/hui-dialog-save-config.ts +++ b/src/panels/lovelace/editor/hui-dialog-save-config.ts @@ -4,7 +4,7 @@ import type { CSSResultGroup } from "lit"; import { LitElement, css, html, nothing } from "lit"; import { customElement, property, state } from "lit/decorators"; import { fireEvent } from "../../../common/dom/fire_event"; -import "../../../components/ha-circular-progress"; +import "../../../components/ha-spinner"; import "../../../components/ha-dialog"; import "../../../components/ha-dialog-header"; import "../../../components/ha-formfield"; @@ -142,11 +142,10 @@ export class HuiSaveConfig extends LitElement implements HassDialog { @click=${this._saveConfig} > ${this._saving - ? html`` + >` : ""} ${this.hass!.localize( "ui.panel.lovelace.editor.save_config.save" diff --git a/src/panels/lovelace/editor/hui-element-editor.ts b/src/panels/lovelace/editor/hui-element-editor.ts index e181dd8dcc..d243f64911 100644 --- a/src/panels/lovelace/editor/hui-element-editor.ts +++ b/src/panels/lovelace/editor/hui-element-editor.ts @@ -8,7 +8,7 @@ import { debounce } from "../../../common/util/debounce"; import { handleStructError } from "../../../common/structs/handle-errors"; import { deepEqual } from "../../../common/util/deep-equal"; import "../../../components/ha-alert"; -import "../../../components/ha-circular-progress"; +import "../../../components/ha-spinner"; import "../../../components/ha-yaml-editor"; import type { HaYamlEditor } from "../../../components/ha-yaml-editor"; import type { LovelaceConfig } from "../../../data/lovelace/config/types"; @@ -223,12 +223,7 @@ export abstract class HuiElementEditor< ? html`
${this._loading - ? html` - - ` + ? html` ` : cache( this._subElementEditorConfig ? this._renderSubElement() @@ -470,7 +465,7 @@ export abstract class HuiElementEditor< ha-code-editor { --code-mirror-max-height: calc(100vh - 245px); } - ha-circular-progress { + ha-spinner { display: block; margin: auto; } diff --git a/src/panels/lovelace/editor/select-dashboard/hui-dialog-select-dashboard.ts b/src/panels/lovelace/editor/select-dashboard/hui-dialog-select-dashboard.ts index 77bb035b1c..da18eb45ca 100644 --- a/src/panels/lovelace/editor/select-dashboard/hui-dialog-select-dashboard.ts +++ b/src/panels/lovelace/editor/select-dashboard/hui-dialog-select-dashboard.ts @@ -9,7 +9,7 @@ import "../../../../components/ha-icon-button"; import "../../../../components/ha-md-select"; import "../../../../components/ha-md-select-option"; import "../../../../components/ha-button"; -import "../../../../components/ha-circular-progress"; +import "../../../../components/ha-spinner"; import type { LovelaceConfig } from "../../../../data/lovelace/config/types"; import type { LovelaceDashboard } from "../../../../data/lovelace/dashboard"; import { fetchDashboards } from "../../../../data/lovelace/dashboard"; @@ -106,10 +106,7 @@ export class HuiDialogSelectDashboard extends LitElement { ` : html`
- +
`}
diff --git a/src/panels/lovelace/editor/view-editor/hui-dialog-edit-view.ts b/src/panels/lovelace/editor/view-editor/hui-dialog-edit-view.ts index 2d2481e3a0..a23f64579c 100644 --- a/src/panels/lovelace/editor/view-editor/hui-dialog-edit-view.ts +++ b/src/panels/lovelace/editor/view-editor/hui-dialog-edit-view.ts @@ -18,7 +18,7 @@ import { navigate } from "../../../../common/navigate"; import { deepEqual } from "../../../../common/util/deep-equal"; import "../../../../components/ha-alert"; import "../../../../components/ha-button"; -import "../../../../components/ha-circular-progress"; +import "../../../../components/ha-spinner"; import "../../../../components/ha-dialog"; import "../../../../components/ha-dialog-header"; import "../../../../components/ha-yaml-editor"; @@ -312,11 +312,7 @@ export class HuiDialogEditView extends LitElement { @click=${this._save} > ${this._saving - ? html`` + ? html`` : nothing} ${this.hass!.localize("ui.common.save")} diff --git a/src/panels/lovelace/editor/view-header/hui-dialog-edit-view-header.ts b/src/panels/lovelace/editor/view-header/hui-dialog-edit-view-header.ts index a1b7d31c6b..615b53e36c 100644 --- a/src/panels/lovelace/editor/view-header/hui-dialog-edit-view-header.ts +++ b/src/panels/lovelace/editor/view-header/hui-dialog-edit-view-header.ts @@ -8,7 +8,7 @@ import { fireEvent } from "../../../../common/dom/fire_event"; import { stopPropagation } from "../../../../common/dom/stop_propagation"; import { deepEqual } from "../../../../common/util/deep-equal"; import "../../../../components/ha-button"; -import "../../../../components/ha-circular-progress"; +import "../../../../components/ha-spinner"; import "../../../../components/ha-dialog"; import "../../../../components/ha-dialog-header"; import "../../../../components/ha-yaml-editor"; @@ -140,11 +140,7 @@ export class HuiDialogEditViewHeader extends LitElement { @click=${this._save} > ${this._saving - ? html`` + ? html`` : nothing} ${this.hass!.localize("ui.common.save")} diff --git a/src/panels/lovelace/header-footer/hui-graph-header-footer.ts b/src/panels/lovelace/header-footer/hui-graph-header-footer.ts index 72f2016b12..003eeee538 100644 --- a/src/panels/lovelace/header-footer/hui-graph-header-footer.ts +++ b/src/panels/lovelace/header-footer/hui-graph-header-footer.ts @@ -4,7 +4,7 @@ import { LitElement, css, html, nothing } from "lit"; import { customElement, property, state } from "lit/decorators"; import { isComponentLoaded } from "../../../common/config/is_component_loaded"; import { computeDomain } from "../../../common/entity/compute_domain"; -import "../../../components/ha-circular-progress"; +import "../../../components/ha-spinner"; import { subscribeHistoryStatesTimeWindow } from "../../../data/history"; import type { HomeAssistant } from "../../../types"; import { findEntities } from "../common/find-entities"; @@ -108,10 +108,7 @@ export class HuiGraphHeaderFooter if (!this._coordinates) { return html`
- +
`; } @@ -215,7 +212,7 @@ export class HuiGraphHeaderFooter } static styles = css` - ha-circular-progress { + ha-spinner { position: absolute; top: calc(50% - 14px); } diff --git a/src/panels/lovelace/hui-editor.ts b/src/panels/lovelace/hui-editor.ts index ba4a585de8..75ea3430aa 100644 --- a/src/panels/lovelace/hui-editor.ts +++ b/src/panels/lovelace/hui-editor.ts @@ -8,7 +8,6 @@ import { customElement, property, state } from "lit/decorators"; import { classMap } from "lit/directives/class-map"; import { array, assert, object, optional, string, type } from "superstruct"; import { deepEqual } from "../../common/util/deep-equal"; -import "../../components/ha-circular-progress"; import "../../components/ha-code-editor"; import type { HaCodeEditor } from "../../components/ha-code-editor"; import "../../components/ha-icon-button"; diff --git a/src/panels/media-browser/ha-bar-media-player.ts b/src/panels/media-browser/ha-bar-media-player.ts index 496bfa8938..cca18bdefa 100644 --- a/src/panels/media-browser/ha-bar-media-player.ts +++ b/src/panels/media-browser/ha-bar-media-player.ts @@ -23,7 +23,7 @@ import { debounce } from "../../common/util/debounce"; import "../../components/ha-slider"; import "../../components/ha-button"; import "../../components/ha-button-menu"; -import "../../components/ha-circular-progress"; +import "../../components/ha-spinner"; import "../../components/ha-domain-icon"; import "../../components/ha-icon-button"; import "../../components/ha-list-item"; @@ -164,12 +164,7 @@ export class BarMediaPlayer extends SubscribeMixin(LitElement) { // Only show spinner after 500ms new Promise((resolve) => { setTimeout(resolve, 500); - }).then( - () => - html`` - ) + }).then(() => html``) )}
`; @@ -254,7 +249,7 @@ export class BarMediaPlayer extends SubscribeMixin(LitElement) { : ""}" > ${stateObj.state === "buffering" - ? html` ` + ? html` ` : html`
${controls === undefined diff --git a/src/panels/profile/dialog-ha-mfa-module-setup-flow.ts b/src/panels/profile/dialog-ha-mfa-module-setup-flow.ts index 44e197f444..4d10f8883d 100644 --- a/src/panels/profile/dialog-ha-mfa-module-setup-flow.ts +++ b/src/panels/profile/dialog-ha-mfa-module-setup-flow.ts @@ -2,7 +2,7 @@ import "@material/mwc-button"; import type { CSSResultGroup } from "lit"; import { css, html, LitElement, nothing } from "lit"; import { customElement, property, state } from "lit/decorators"; -import "../../components/ha-circular-progress"; +import "../../components/ha-spinner"; import "../../components/ha-dialog"; import "../../components/ha-form/ha-form"; import "../../components/ha-markdown"; @@ -84,7 +84,7 @@ class HaMfaModuleSetupFlow extends LitElement { : ""} ${!this._step ? html`` : html`${this._step.type === "abort" ? html` ${this._loading ? html`
- +
` : html`