Home-Assistant
/
frontend
mirror of https://github.com/home-assistant/frontend.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Add shoelace loading spinner component (#24525) 

* Add loading spinner component

* Update some spinners

* Update some spinners

* Update indeterminate to ha-spinner

* add ha-spinner-delayed

* Remove ha-circular-progress component

* Update demo/src/custom-cards/ha-demo-card.ts

Co-authored-by: Bram Kragten <mail@bramkragten.nl>

* Fix gallery

* Update set size

* Add ha-fade-in

* Remove wrong testing conditions

* Remove size number option

---------

Co-authored-by: Bram Kragten <mail@bramkragten.nl>
pull/24625/head
Wendelin 2025-03-13 17:05:51 +01:00 committed by GitHub
parent e09dbb474b
commit 28c355812c
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
116 changed files with 497 additions and 583 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
demo/src/custom-cards/ha-demo-card.ts
View File

@ -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 {
<div class="picker">
<div class="label">
${this._switching
? html`
<ha-circular-progress indeterminate></ha-circular-progress>
`
? html`<ha-spinner></ha-spinner>`
: until(
selectedDemoConfig.then(
(conf) => html`

63
gallery/src/pages/components/ha-circular-progress.ts
View File

@ -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`<ha-card header="Basic circular progress">
<div class="card-content">
<ha-circular-progress indeterminate></ha-circular-progress></div
></ha-card>
<ha-card header="Different circular progress sizes">
<div class="card-content">
<ha-circular-progress
indeterminate
size="tiny"
></ha-circular-progress>
<ha-circular-progress
indeterminate
size="small"
></ha-circular-progress>
<ha-circular-progress
indeterminate
size="medium"
></ha-circular-progress>
<ha-circular-progress
indeterminate
size="large"
></ha-circular-progress></div
></ha-card>
<ha-card header="Circular progress with an aria-label">
<div class="card-content">
<ha-circular-progress
indeterminate
aria-label="Doing something..."
></ha-circular-progress>
<ha-circular-progress
indeterminate
.ariaLabel=${"Doing something..."}
></ha-circular-progress></div
></ha-card>`;
}
static styles = css`
ha-card {
max-width: 600px;
margin: 24px auto;
}
`;
}
declare global {
interface HTMLElementTagNameMap {
"demo-components-ha-circular-progress": DemoHaCircularProgress;
}
}

2
gallery/src/pages/components/ha-circular-progress.markdown → gallery/src/pages/components/ha-spinner.markdown
View File

@ -1,4 +1,4 @@
---
title: Circular Progress
title: Spinner
subtitle: Can be used to indicate an ongoing task.
---

44
gallery/src/pages/components/ha-spinner.ts Normal file
View File

@ -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`<ha-card header="Basic spinner">
<div class="card-content">
<ha-spinner></ha-spinner></div
></ha-card>
<ha-card header="Different spinner sizes">
<div class="card-content">
<ha-spinner size="tiny"></ha-spinner>
<ha-spinner size="small"></ha-spinner>
<ha-spinner size="medium"></ha-spinner>
<ha-spinner size="large"></ha-spinner></div
></ha-card>
<ha-card header="Spinner with an aria-label">
<div class="card-content">
<ha-spinner aria-label="Doing something..."></ha-spinner>
<ha-spinner .ariaLabel=${"Doing something..."}></ha-spinner></div
></ha-card>`;
}
static styles = css`
ha-card {
max-width: 600px;
margin: 24px auto;
}
`;
}
declare global {
interface HTMLElementTagNameMap {
"demo-components-ha-spinner": DemoHaSpinner;
}
}

4
hassio/src/addon-view/config/hassio-addon-config-tab.ts
View File

@ -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`<ha-circular-progress indeterminate></ha-circular-progress>`;
return html`<ha-spinner></ha-spinner>`;
}
const hasConfiguration =
(this.addon.options && Object.keys(this.addon.options).length) ||

4
hassio/src/addon-view/documentation/hassio-addon-documentation-tab.ts
View File

@ -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`<ha-circular-progress indeterminate></ha-circular-progress>`;
return html`<ha-spinner></ha-spinner>`;
}
return html`
<div class="content">

1
hassio/src/addon-view/hassio-addon-dashboard.ts
View File

@ -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,

4
hassio/src/addon-view/info/hassio-addon-info-tab.ts
View File

@ -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`<ha-circular-progress indeterminate></ha-circular-progress>`;
return html`<ha-spinner></ha-spinner>`;
}
return html`

6
hassio/src/addon-view/log/hassio-addon-log-tab.ts
View File

@ -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`
<ha-circular-progress indeterminate></ha-circular-progress>
`;
return html` <ha-spinner></ha-spinner> `;
}
return html`
<div class="search">

1
hassio/src/components/hassio-upload-backup.ts
View File

@ -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";

7
hassio/src/dialogs/backup/dialog-hassio-backup.ts
View File

@ -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`<ha-alert alert-type="error">${this._error}</ha-alert>`
: this._restoringBackup
? html`<div class="loading">
<ha-circular-progress indeterminate></ha-circular-progress>
<ha-spinner></ha-spinner>
</div>`
: html`
<supervisor-backup-content
@ -310,10 +311,6 @@ class HassioBackupDialog
haStyle,
haStyleDialog,
css`
ha-circular-progress {
display: block;
text-align: center;
}
ha-header-bar {
--mdc-theme-on-primary: var(--primary-text-color);
--mdc-theme-primary: var(--mdc-theme-surface);

7
hassio/src/dialogs/backup/dialog-hassio-create-backup.ts
View File

@ -5,6 +5,7 @@ import { customElement, property, query, state } from "lit/decorators";
import { fireEvent } from "../../../../src/common/dom/fire_event";
import "../../../../src/components/buttons/ha-progress-button";
import "../../../../src/components/ha-alert";
import "../../../../src/components/ha-spinner";
import { createCloseHeading } from "../../../../src/components/ha-dialog";
import {
createHassioFullBackup,
@ -58,7 +59,7 @@ class HassioCreateBackupDialog extends LitElement {
)}
>
${this._creatingBackup
? html`<ha-circular-progress indeterminate></ha-circular-progress>`
? html`<ha-spinner></ha-spinner>`
: html`<supervisor-backup-content
.hass=${this.hass}
.supervisor=${this._dialogParams.supervisor}
@ -142,10 +143,6 @@ class HassioCreateBackupDialog extends LitElement {
:host {
direction: var(--direction);
}
ha-circular-progress {
display: block;
text-align: center;
}
`,
];
}

11
hassio/src/dialogs/datadisk/dialog-hassio-datadisk.ts
View File

@ -4,7 +4,7 @@ import { css, html, LitElement, nothing } from "lit";
import { customElement, property, state } from "lit/decorators";
import memoizeOne from "memoize-one";
import { fireEvent } from "../../../../src/common/dom/fire_event";
import "../../../../src/components/ha-circular-progress";
import "../../../../src/components/ha-spinner";
import "../../../../src/components/ha-select";
import "../../../../src/components/ha-dialog";
import {
@ -69,12 +69,7 @@ class HassioDatadiskDialog extends LitElement {
?hideActions=${this.moving}
>
${this.moving
? html` <ha-circular-progress
aria-label="Moving"
size="large"
indeterminate
>
</ha-circular-progress>
? html`<ha-spinner aria-label="Moving" size="large"></ha-spinner>
<p class="progress-text">
${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;

13
hassio/src/dialogs/network/dialog-hassio-network.ts
View File

@ -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`<ha-circular-progress
aria-label="Scanning"
indeterminate
size="small"
>
</ha-circular-progress>`
? html`<ha-spinner aria-label="Scanning" size="small">
</ha-spinner>`
: this.supervisor.localize("dialog.network.scan_ap")}
</mwc-button>
${this._accessPoints &&
@ -282,8 +278,7 @@ export class DialogHassioNetwork
</mwc-button>
<mwc-button @click=${this._updateNetwork} .disabled=${!this._dirty}>
${this._processing
? html`<ha-circular-progress indeterminate size="small">
</ha-circular-progress>`
? html`<ha-spinner size="small"> </ha-spinner>`
: this.supervisor.localize("common.save")}
</mwc-button>
</div>`;

9
hassio/src/dialogs/repositories/dialog-hassio-repositories.ts
View File

@ -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 {
></ha-textfield>
<mwc-button @click=${this._addRepository}>
${this._processing
? html`<ha-circular-progress
indeterminate
size="small"
></ha-circular-progress>`
? html`<ha-spinner size="small"></ha-spinner>`
: 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;

9
hassio/src/update-available/update-available-card.ts
View File

@ -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`<ha-circular-progress
: html`<ha-spinner
aria-label="Updating"
size="large"
indeterminate
>
</ha-circular-progress>
></ha-spinner>
<p class="progress-text">
${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;

9
src/components/buttons/ha-progress-button.ts
View File

@ -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`<ha-svg-icon .path=${mdiAlertOctagram}></ha-svg-icon>`
: this.progress
? html`
<ha-circular-progress
size="small"
indeterminate
></ha-circular-progress>
`
? html`<ha-spinner size="small"></ha-spinner>`
: nothing}
</div>
`}

49
src/components/ha-circular-progress.ts
View File

@ -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;
}
}

19
src/components/ha-fade-in.ts Normal file
View File

@ -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;
}
}

1
src/components/ha-picture-upload.ts
View File

@ -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";

58
src/components/ha-progress-ring.ts Normal file
View File

@ -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;
}
}

56
src/components/ha-spinner.ts Normal file
View File

@ -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;
}
}

4
src/components/media-player/dialog-media-manage.ts
View File

@ -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`
<div class="refresh">
<ha-circular-progress indeterminate></ha-circular-progress>
<ha-spinner></ha-spinner>
</div>
`
: !children.length

3
src/components/media-player/ha-media-manage-button.ts
View File

@ -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;
}

11
src/components/media-player/ha-media-player-browse.ts
View File

@ -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`<ha-circular-progress indeterminate></ha-circular-progress>`;
return html`<ha-spinner></ha-spinner>`;
}
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 {

9
src/components/media-player/ha-media-upload-button.ts
View File

@ -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`
<ha-circular-progress
<ha-spinner
size="small"
indeterminate
area-label="Uploading"
slot="icon"
></ha-circular-progress>
></ha-spinner>
`
: html` <ha-svg-icon .path=${mdiUpload} slot="icon"></ha-svg-icon> `}
</mwc-button>
@ -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;
}

1
src/dialogs/config-flow/dialog-data-entry-flow.ts
View File

@ -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";

7
src/dialogs/config-flow/previews/flow-preview-generic_camera.ts
View File

@ -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`<p>Stream:</p>
<ha-circular-progress
<ha-spinner
class="render-spinner"
id="hls-load-spinner"
indeterminate
size="large"
></ha-circular-progress>
></ha-spinner>
<ha-hls-player
autoplay
playsinline

4
src/dialogs/config-flow/step-flow-form.ts
View File

@ -6,7 +6,7 @@ import { dynamicElement } from "../../common/dom/dynamic-element-directive";
import { fireEvent } from "../../common/dom/fire_event";
import { isNavigationClick } from "../../common/dom/is-navigation-click";
import "../../components/ha-alert";
import "../../components/ha-circular-progress";
import "../../components/ha-spinner";
import { computeInitialHaFormData } from "../../components/ha-form/compute-initial-ha-form-data";
import "../../components/ha-form/ha-form";
import type { HaFormSchema } from "../../components/ha-form/types";
@ -84,7 +84,7 @@ class StepFlowForm extends LitElement {
${this._loading
? html`
<div class="submit-spinner">
<ha-circular-progress indeterminate></ha-circular-progress>
<ha-spinner></ha-spinner>
</div>
`
: html`

6
src/dialogs/config-flow/step-flow-loading.ts
View File

@ -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`
<div class="init-spinner">
${description ? html`<div>${description}</div>` : ""}
<ha-circular-progress indeterminate></ha-circular-progress>
<ha-spinner></ha-spinner>
</div>
`;
}
@ -38,7 +38,7 @@ class StepFlowLoading extends LitElement {
padding: 50px 100px;
text-align: center;
}
ha-circular-progress {
ha-spinner {
margin-top: 16px;
}
`;

6
src/dialogs/config-flow/step-flow-progress.ts
View File

@ -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)}
</h2>
<div class="content">
<ha-circular-progress indeterminate></ha-circular-progress>
<ha-spinner></ha-spinner>
${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;
}
`,

18
src/dialogs/more-info/controls/more-info-configurator.ts
View File

@ -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`<ha-circular-progress
indeterminate
? html`<ha-spinner
size="tiny"
aria-label="Configuring"
></ha-circular-progress>`
></ha-spinner>`
: ""}
${this.stateObj.attributes.submit_caption}
</mwc-button>
@ -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;
}
`;
}

7
src/dialogs/more-info/controls/more-info-conversation.ts
View File

@ -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 {
></ha-assist-chat>
`
: html`<div class="pipelines-loading">
<ha-circular-progress
indeterminate
size="large"
></ha-circular-progress>
<ha-spinner size="large"></ha-spinner>
</div>`}
`;
}

4
src/dialogs/more-info/controls/more-info-update.ts
View File

@ -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`
<div class="flex center loader">
<ha-circular-progress indeterminate></ha-circular-progress>
<ha-spinner></ha-spinner>
</div>
`;
}

10
src/dialogs/quick-bar/ha-quick-bar.ts
View File

@ -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 {
</ha-textfield>
</div>
${!items
? html`<ha-circular-progress
size="small"
indeterminate
></ha-circular-progress>`
? html`<ha-spinner size="small"></ha-spinner>`
: items.length === 0
? html`
<div class="nothing-found">
@ -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);
}

4
src/dialogs/restart/dialog-restart.ts
View File

@ -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`
<div class="loader">
<ha-circular-progress indeterminate></ha-circular-progress>
<ha-spinner></ha-spinner>
</div>
`
: html`

7
src/dialogs/tts-try/dialog-tts-try.ts
View File

@ -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 {
</ha-textarea>
${this._loadingExample
? html`
<ha-circular-progress
<ha-spinner
size="small"
indeterminate
slot="primaryAction"
class="loading"
></ha-circular-progress>
></ha-spinner>
`
: html`
<ha-button

8
src/dialogs/voice-assistant-setup/voice-assistant-setup-step-check.ts
View File

@ -2,7 +2,7 @@ import { html, LitElement, nothing, type PropertyValues } from "lit";
import { customElement, property, 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 { testAssistSatelliteConnection } from "../../data/assist_satellite";
import type { HomeAssistant } from "../../types";
import { AssistantSetupStyles } from "./styles";
@ -83,11 +83,7 @@ export class HaVoiceAssistantSetupStepCheck extends LitElement {
)}
</p>
${this._showLoader
? html`<ha-circular-progress
indeterminate
></ha-circular-progress>`
: nothing} `}
${this._showLoader ? html`<ha-spinner></ha-spinner>` : nothing}`}
</div>`;
}

6
src/dialogs/voice-assistant-setup/voice-assistant-setup-step-local.ts
View File

@ -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"
)}
</p>
<ha-circular-progress indeterminate></ha-circular-progress>
<ha-spinner></ha-spinner>
<p>
${this._detailState || "Installation can take several minutes"}
</p>`
@ -425,7 +425,7 @@ export class HaVoiceAssistantSetupStepLocal extends LitElement {
static styles = [
AssistantSetupStyles,
css`
ha-circular-progress {
ha-spinner {
margin-top: 24px;
margin-bottom: 24px;
}

19
src/dialogs/voice-assistant-setup/voice-assistant-setup-step-update.ts
View File

@ -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"
)}
</p>
<ha-circular-progress
.value=${progressIsNumeric
? (stateObj.attributes.update_percentage as number) / 100
: undefined}
.indeterminate=${!progressIsNumeric}
></ha-circular-progress>
${progressIsNumeric
? html`
<ha-progress-ring
.value=${stateObj.attributes.update_percentage as number}
></ha-progress-ring>
`
: html`<ha-spinner></ha-spinner>`}
<p>
${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;
}

3
src/dialogs/voice-assistant-setup/voice-assistant-setup-step-wake-word.ts
View File

@ -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`<ha-circular-progress indeterminate></ha-circular-progress>`;
return html`<ha-spinner></ha-spinner>`;
}
return html`<div class="content">

12
src/dialogs/voice-command-dialog/ha-voice-command-dialog.ts
View File

@ -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 {
</ha-button>
${!this._pipelines
? html`<div class="pipelines-loading">
<ha-circular-progress
indeterminate
size="small"
></ha-circular-progress>
<ha-spinner size="small"></ha-spinner>
</div>`
: this._pipelines?.map(
(pipeline) =>
@ -180,10 +177,7 @@ export class HaVoiceCommandDialog extends LitElement {
</ha-assist-chat>
`
: html`<div class="pipelines-loading">
<ha-circular-progress
indeterminate
size="large"
></ha-circular-progress>
<ha-spinner size="large"></ha-spinner>
</div>`}
</ha-dialog>
`;

4
src/layouts/ha-init-page.ts
View File

@ -36,7 +36,7 @@ class HaInitPage extends LitElement {
`
: html`
<div id="progress-indicator-wrapper">
<ha-circular-progress indeterminate></ha-circular-progress>
<ha-spinner></ha-spinner>
</div>
<div id="loading-text">
${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(() => {

4
src/layouts/hass-loading-screen.ts
View File

@ -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 {
`}
</div>`}
<div class="content">
<ha-circular-progress indeterminate></ha-circular-progress>
<ha-spinner></ha-spinner>
${this.message
? html`<div id="loading-text">${this.message}</div>`
: nothing}

4
src/onboarding/onboarding-core-config.ts
View File

@ -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`<div class="row center">
<ha-circular-progress indeterminate></ha-circular-progress>
<ha-spinner></ha-spinner>
</div>`;
}
return html`

12
src/onboarding/onboarding-location.ts
View File

@ -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 {
>
<ha-svg-icon slot="leadingIcon" .path=${mdiMagnify}></ha-svg-icon>
${this._working
? html`
<ha-circular-progress
slot="trailingIcon"
indeterminate
size="small"
></ha-circular-progress>
`
? html` <ha-spinner slot="trailingIcon" size="small"></ha-spinner> `
: html`
<ha-icon-button
@click=${this._handleButtonClick}
@ -500,7 +494,7 @@ class OnboardingLocation extends LitElement {
inset-inline-end: 10px;
direction: var(--direction);
}
ha-textfield > ha-circular-progress {
ha-textfield > ha-spinner {
position: relative;
left: 12px;
inset-inline-start: 12px;

4
src/onboarding/onboarding-restore-backup.ts
View File

@ -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`<div class="loading">
<ha-circular-progress indeterminate></ha-circular-progress>
<ha-spinner></ha-spinner>
</div>`
: this._view === "upload"
? html`

1
src/onboarding/restore-backup/onboarding-restore-backup-details.ts
View File

@ -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";

4
src/onboarding/restore-backup/onboarding-restore-backup-status.ts
View File

@ -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`
<div class="loading">
<ha-circular-progress indeterminate></ha-circular-progress>
<ha-spinner></ha-spinner>
</div>
<p>
${this.localize(

4
src/panels/config/application_credentials/dialog-add-application-credential.ts
View File

@ -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`
<div slot="primaryAction" class="submit-spinner">
<ha-circular-progress indeterminate></ha-circular-progress>
<ha-spinner></ha-spinner>
</div>
`
: html`

8
src/panels/config/backup/components/ha-backup-summary-card.ts
View File

@ -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 {
<ha-card outlined>
<div class="summary">
${this.status === "loading"
? html`<ha-circular-progress indeterminate></ha-circular-progress>`
? html`<ha-spinner></ha-spinner>`
: html`
<div class="icon ${this.status}">
<ha-svg-icon .path=${ICONS[this.status]}></ha-svg-icon>
@ -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;

6
src/panels/config/backup/dialogs/dialog-restore-backup.ts
View File

@ -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`<div class="centered">
<ha-circular-progress indeterminate></ha-circular-progress>
<ha-spinner></ha-spinner>
<p>
${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"] {

16
src/panels/config/backup/ha-config-backup-backups.ts
View File

@ -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`<div slot="icon">
<ha-circular-progress
.size=${"small"}
indeterminate
></ha-circular-progress>
? html`<div slot="icon" class="loading">
<ha-spinner .size=${"small"}></ha-spinner>
</div>`
: html`<ha-svg-icon
slot="icon"
@ -613,8 +610,11 @@ class HaConfigBackupBackups extends SubscribeMixin(LitElement) {
return [
haStyle,
css`
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);
}
`,
];

10
src/panels/config/backup/ha-config-backup-details.ts
View File

@ -14,7 +14,8 @@ 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-fade-in";
import "../../../components/ha-spinner";
import "../../../components/ha-icon-button";
import "../../../components/ha-list-item";
import "../../../components/ha-md-list";
@ -146,7 +147,9 @@ class HaConfigBackupDetails extends LitElement {
</ha-alert>
`
: !this._backup
? html`<ha-circular-progress active></ha-circular-progress>`
? html`<ha-fade-in .delay=${1000}
><ha-spinner></ha-spinner
></ha-fade-in>`
: html`
<ha-backup-details-summary
.backup=${this._backup}
@ -357,6 +360,9 @@ class HaConfigBackupDetails extends LitElement {
display: grid;
margin-bottom: 24px;
}
ha-spinner {
margin: 24px auto;
}
.card-content {
padding: 0 20px;
}

10
src/panels/config/backup/ha-config-backup-location.ts
View File

@ -6,7 +6,8 @@ import "../../../components/ha-button";
import "../../../components/ha-switch";
import "../../../components/ha-button-menu";
import "../../../components/ha-card";
import "../../../components/ha-circular-progress";
import "../../../components/ha-fade-in";
import "../../../components/ha-spinner";
import "../../../components/ha-icon-button";
import "../../../components/ha-list-item";
import "../../../components/ha-md-list";
@ -92,7 +93,9 @@ class HaConfigBackupDetails extends LitElement {
</ha-alert>
`
: !this.agentId
? html`<ha-circular-progress active></ha-circular-progress>`
? html`<ha-fade-in .delay=${1000}
><ha-spinner></ha-spinner
></ha-fade-in>`
: html`
${CLOUD_AGENT === this.agentId
? html`
@ -358,6 +361,9 @@ class HaConfigBackupDetails extends LitElement {
.card-header {
padding-bottom: 8px;
}
ha-spinner {
margin: 24px auto;
}
`;
}

16
src/panels/config/backup/ha-config-backup-overview.ts
View File

@ -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`<div slot="icon">
<ha-circular-progress
.size=${"small"}
indeterminate
></ha-circular-progress>
? html`<div slot="icon" class="loading">
<ha-spinner .size=${"small"}></ha-spinner>
</div>`
: html`<ha-svg-icon slot="icon" .path=${mdiPlus}></ha-svg-icon>`}
</ha-fab>
@ -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);
}
`,
];

4
src/panels/config/blueprint/blueprint-generic-editor.ts
View File

@ -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`<ha-circular-progress indeterminate></ha-circular-progress>`}
: html`<ha-spinner></ha-spinner>`}
</div>
${this._config.use_blueprint.path

12
src/panels/config/blueprint/dialog-import-blueprint.ts
View File

@ -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`<ha-circular-progress
indeterminate
? html`<ha-spinner
size="small"
.ariaLabel=${this.hass.localize(
"ui.panel.config.blueprint.add.importing"
)}
></ha-circular-progress>`
></ha-spinner>`
: ""}
${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`<ha-circular-progress
indeterminate
? html`<ha-spinner
size="small"
.ariaLabel=${this.hass.localize(
"ui.panel.config.blueprint.add.saving"
)}
></ha-circular-progress>`
></ha-spinner>`
: ""}
${this._result.exists
? this.hass.localize(

6
src/panels/config/cloud/account/cloud-webhooks.ts
View File

@ -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`
<div class="progress">
<ha-circular-progress
indeterminate
></ha-circular-progress>
<ha-spinner></ha-spinner>
</div>
`
: this._cloudHooks![entry.webhook_id]

4
src/panels/config/cloud/account/dialog-cloud-support-package.ts
View File

@ -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 {
></ha-markdown-element>`
: html`
<div class="progress-container">
<ha-circular-progress indeterminate></ha-circular-progress>
<ha-spinner></ha-spinner>
Generating preview...
</div>
`}

19
src/panels/config/dashboard/ha-config-updates.ts
View File

@ -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) {
)}
></state-badge>
${this.narrow && entity.attributes.in_progress
? html`<ha-circular-progress
indeterminate
? html`<ha-spinner
slot="graphic"
class="absolute"
size="small"
.ariaLabel=${this.hass.localize(
"ui.panel.config.updates.update_in_progress"
)}
></ha-circular-progress>`
></ha-spinner>`
: ""}
<span
>${deviceEntry
@ -125,14 +125,13 @@ class HaConfigUpdates extends SubscribeMixin(LitElement) {
</span>
${!this.narrow
? entity.attributes.in_progress
? html`<ha-circular-progress
indeterminate
? html`<ha-spinner
size="small"
slot="meta"
.ariaLabel=${this.hass.localize(
"ui.panel.config.updates.update_in_progress"
)}
></ha-circular-progress>`
></ha-spinner>`
: html`<ha-icon-next slot="meta"></ha-icon-next>`
: ""}
</ha-list-item>
@ -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;

6
src/panels/config/helpers/dialog-helper-detail.ts
View File

@ -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 {
</mwc-button>`}
`;
} else if (this._loading || this._helperFlows === undefined) {
content = html`<ha-circular-progress
indeterminate
></ha-circular-progress>`;
content = html`<ha-spinner></ha-spinner>`;
} else {
const items = this._filterHelpers(
HELPERS,

5
src/panels/config/integrations/dialog-add-integration.ts
View File

@ -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 {
</lit-virtualizer>
</mwc-list>`
: html`<div class="flex center">
<ha-circular-progress indeterminate></ha-circular-progress>
<ha-spinner></ha-spinner>
</div>`} `;
}
@ -740,7 +741,7 @@ class AddIntegrationDialog extends LitElement {
justify-content: center;
align-items: center;
}
ha-circular-progress {
ha-spinner {
margin: 24px 0;
}
mwc-list {

4
src/panels/config/integrations/integration-panels/matter/dialog-matter-manage-fabrics.ts
View File

@ -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 {
)}
</mwc-list>`
: html`<div class="center">
<ha-circular-progress indeterminate></ha-circular-progress>
<ha-spinner></ha-spinner>
</div>`}
</ha-dialog>
`;

6
src/panels/config/integrations/integration-panels/matter/dialog-matter-open-commissioning-window.ts
View File

@ -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`
<div class="flex-container">
<ha-circular-progress indeterminate></ha-circular-progress>
<ha-spinner></ha-spinner>
<div class="status">
<p>
<b>
@ -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;
}

6
src/panels/config/integrations/integration-panels/matter/dialog-matter-ping-node.ts
View File

@ -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`
<div class="flex-container">
<ha-circular-progress indeterminate></ha-circular-progress>
<ha-spinner></ha-spinner>
<div class="status">
<p>
<b>
@ -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;
}

6
src/panels/config/integrations/integration-panels/matter/dialog-matter-reinterview-node.ts
View File

@ -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`
<div class="flex-container">
<ha-circular-progress indeterminate></ha-circular-progress>
<ha-spinner></ha-spinner>
<div class="status">
<p>
<b>
@ -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;
}

9
src/panels/config/integrations/integration-panels/matter/matter-add-device/matter-add-device-commissioning.ts
View File

@ -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`
<div class="content">
<ha-circular-progress
size="medium"
indeterminate
></ha-circular-progress>
<ha-spinner size="medium"></ha-spinner>
<p>
${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;
}
`,

7
src/panels/config/integrations/integration-panels/matter/matter-add-device/matter-add-device-new.ts
View File

@ -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`
<div class="content">
<ha-circular-progress
size="medium"
indeterminate
></ha-circular-progress>
<ha-spinner size="medium"></ha-spinner>
</div>
`;
}

6
src/panels/config/integrations/integration-panels/zha/dialog-zha-reconfigure-device.ts
View File

@ -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`
<div class="flex-container">
<ha-circular-progress indeterminate></ha-circular-progress>
<ha-spinner></ha-spinner>
<div class="status">
<p>
<b>
@ -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;

9
src/panels/config/integrations/integration-panels/zha/zha-add-devices-page.ts
View File

@ -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"
)}
</h1>
<ha-circular-progress
indeterminate
aria-label="Searching"
></ha-circular-progress>
<ha-spinner aria-label="Searching"></ha-spinner>
`
: html`
<div>
@ -237,7 +234,7 @@ class ZHAAddDevicesPage extends LitElement {
.error {
color: var(--error-color);
}
ha-circular-progress {
ha-spinner {
margin: 20px;
}
.searching {

7
src/panels/config/integrations/integration-panels/zha/zha-add-group-page.ts
View File

@ -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`<ha-circular-progress
indeterminate
? html`<ha-spinner
size="small"
.ariaLabel=${this.hass!.localize(
"ui.panel.config.zha.groups.creating_group"
)}
></ha-circular-progress>`
></ha-spinner>`
: ""}
${this.hass!.localize(
"ui.panel.config.zha.groups.create"

7
src/panels/config/integrations/integration-panels/zha/zha-device-neighbors.ts
View File

@ -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`<ha-circular-progress
size="large"
indeterminate
></ha-circular-progress>`
? html`<ha-spinner size="large"></ha-spinner>`
: html`<ha-data-table
.hass=${this.hass}
.columns=${this._columns(this.narrow)}

12
src/panels/config/integrations/integration-panels/zha/zha-group-page.ts
View File

@ -7,7 +7,7 @@ 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-card";
import "../../../../../components/ha-circular-progress";
import "../../../../../components/ha-spinner";
import "../../../../../components/ha-icon-button";
import type { ZHADeviceEndpoint, ZHAGroup } from "../../../../../data/zha";
import {
@ -171,12 +171,11 @@ export class ZHAGroupPage extends LitElement {
class="button"
>
${this._processingRemove
? html`<ha-circular-progress
indeterminate
? html`<ha-spinner
.ariaLabel=${this.hass.localize(
"ui.panel.config.zha.groups.removing_members"
)}
></ha-circular-progress>`
></ha-spinner>`
: 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`<ha-circular-progress
active
? html`<ha-spinner
size="small"
aria-label="Saving"
></ha-circular-progress>`
></ha-spinner>`
: ""}
${this.hass!.localize(
"ui.panel.config.zha.groups.add_members"

4
src/panels/config/integrations/integration-panels/zwave_js/capability-controls/zwave_js-capability-control-color-switch.ts
View File

@ -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`<ha-alert alert-type="error">${this._error}</ha-alert>`;
}
if (!this._color_components) {
return html`<ha-circular-progress indeterminate></ha-circular-progress>`;
return html`<ha-spinner></ha-spinner>`;
}
return this._color_components.map(
(color) =>

4
src/panels/config/integrations/integration-panels/zwave_js/capability-controls/zwave_js-capability-control-door-lock.ts
View File

@ -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`<ha-circular-progress indeterminate></ha-circular-progress>`;
return html`<ha-spinner></ha-spinner>`;
}
const isValid = this._isValid();

23
src/panels/config/integrations/integration-panels/zwave_js/dialog-zwave_js-add-node.ts
View File

@ -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`<div style="display: flex; justify-content: center;">
<ha-circular-progress
size="large"
indeterminate
></ha-circular-progress>
<ha-spinner size="large"></ha-spinner>
</div>`
: this._status === "waiting_for_device"
? html`<div class="flex-container">
<ha-circular-progress indeterminate></ha-circular-progress>
<ha-spinner></ha-spinner>
<p>
${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"
)}
</h3>
<ha-circular-progress
indeterminate
></ha-circular-progress>
<ha-spinner></ha-spinner>
<p>
${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"
)}
</h2>
<ha-circular-progress
indeterminate
></ha-circular-progress>
<ha-spinner></ha-spinner>
<p>
${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`
<div class="flex-container">
<ha-circular-progress
indeterminate
></ha-circular-progress>
<ha-spinner></ha-spinner>
<div class="status">
<p>
<b
@ -1004,7 +995,7 @@ class DialogZWaveJSAddNode extends LitElement {
color: var(--secondary-text-color);
}
.flex-container ha-circular-progress,
.flex-container ha-spinner,
.flex-container ha-svg-icon {
margin-right: 20px;
margin-inline-end: 20px;

6
src/panels/config/integrations/integration-panels/zwave_js/dialog-zwave_js-rebuild-node-routes.ts
View File

@ -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 type { DeviceRegistryEntry } from "../../../../../data/device_registry";
import { computeDeviceName } from "../../../../../data/device_registry";
@ -96,7 +96,7 @@ class DialogZWaveJSRebuildNodeRoutes extends LitElement {
${this._status === "started"
? html`
<div class="flex-container">
<ha-circular-progress indeterminate></ha-circular-progress>
<ha-spinner></ha-spinner>
<div class="status">
<p>
${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;

6
src/panels/config/integrations/integration-panels/zwave_js/dialog-zwave_js-reinterview-node.ts
View File

@ -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`
<div class="flex-container">
<ha-circular-progress indeterminate></ha-circular-progress>
<ha-spinner></ha-spinner>
<div class="status">
<p>
<b>
@ -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;

6
src/panels/config/integrations/integration-panels/zwave_js/dialog-zwave_js-remove-failed-node.ts
View File

@ -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`
<div class="flex-container">
<ha-circular-progress indeterminate></ha-circular-progress>
<ha-spinner></ha-spinner>
<div class="status">
<p>
<b>
@ -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;

6
src/panels/config/integrations/integration-panels/zwave_js/dialog-zwave_js-remove-node.ts
View File

@ -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`
<div class="flex-container">
<ha-circular-progress indeterminate></ha-circular-progress>
<ha-spinner></ha-spinner>
<div class="status">
<p>
<b
@ -249,7 +249,7 @@ class DialogZWaveJSRemoveNode 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;

12
src/panels/config/integrations/integration-panels/zwave_js/zwave_js-config-dashboard.ts
View File

@ -15,6 +15,7 @@ import { classMap } from "lit/directives/class-map";
import "../../../../../components/ha-card";
import "../../../../../components/ha-expansion-panel";
import "../../../../../components/ha-fab";
import "../../../../../components/ha-spinner";
import "../../../../../components/ha-icon-button";
import "../../../../../components/ha-icon-next";
import "../../../../../components/ha-svg-icon";
@ -141,9 +142,7 @@ class ZWaveJSConfigDashboard extends SubscribeMixin(LitElement) {
<div class="heading">
<div class="icon">
${this._status === "disconnected"
? html`<ha-circular-progress
indeterminate
></ha-circular-progress>`
? html`<ha-spinner></ha-spinner>`
: html`
<ha-svg-icon
.path=${this._icon}
@ -423,12 +422,7 @@ class ZWaveJSConfigDashboard extends SubscribeMixin(LitElement) {
@change=${this._dataCollectionToggled}
></ha-switch>
`
: html`
<ha-circular-progress
size="small"
indeterminate
></ha-circular-progress>
`}
: html` <ha-spinner size="small"></ha-spinner> `}
</div>
<div class="card-content">
<p>

6
src/panels/config/integrations/integration-panels/zwave_js/zwave_js-custom-param.ts
View File

@ -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 {
</ha-select>
</div>
<div class="custom-config-buttons">
${this._isLoading
? html`<ha-circular-progress indeterminate></ha-circular-progress>`
: nothing}
${this._isLoading ? html`<ha-spinner></ha-spinner>` : nothing}
<ha-button @click=${this._getCustomConfigValue}>
${this.hass.localize(
"ui.panel.config.zwave_js.node_config.get_value"

6
src/panels/config/logs/error-log-card.ts
View File

@ -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 {
<div id="scroll-top-marker"></div>
${this._loadingPrevState === "loading"
? html`<div class="loading-old">
<ha-circular-progress
.indeterminate=${this._loadingPrevState === "loading"}
></ha-circular-progress>
<ha-spinner></ha-spinner>
</div>`
: nothing}
${this._loadingState === "loading"

4
src/panels/config/logs/system-log-card.ts
View File

@ -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`
<div class="loading-container">
<ha-circular-progress indeterminate></ha-circular-progress>
<ha-spinner></ha-spinner>
</div>
`
: html`

5
src/panels/config/network/supervisor-hostname.ts
View File

@ -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 {
<div class="card-actions">
<mwc-button @click=${this._save} .disabled=${this._processing}>
${this._processing
? html`<ha-circular-progress indeterminate size="small">
</ha-circular-progress>`
? html`<ha-spinner size="small"></ha-spinner>`
: this.hass.localize("ui.common.save")}
</mwc-button>
</div>

8
src/panels/config/network/supervisor-network.ts
View File

@ -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`<ha-circular-progress indeterminate size="small">
</ha-circular-progress>`
? html`<ha-spinner size="small"> </ha-spinner>`
: this.hass.localize(
"ui.panel.config.network.supervisor.scan_ap"
)}
@ -263,8 +262,7 @@ export class HassioNetwork extends LitElement {
<div class="card-actions">
<ha-button @click=${this._updateNetwork} .disabled=${!this._dirty}>
${this._processing
? html`<ha-circular-progress indeterminate size="small">
</ha-circular-progress>`
? html`<ha-spinner size="small"></ha-spinner>`
: this.hass.localize("ui.common.save")}
</ha-button>
<ha-button @click=${this._clear}>

11
src/panels/config/repairs/dialog-system-information.ts
View File

@ -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`
<div class="loading-container">
<ha-circular-progress indeterminate></ha-circular-progress>
<ha-spinner></ha-spinner>
</div>
`);
} else {
@ -314,12 +314,7 @@ class DialogSystemInformation extends LitElement {
const info = domainInfo.info[key] as SystemCheckValueObject;
if (info.type === "pending") {
value = html`
<ha-circular-progress
indeterminate
size="small"
></ha-circular-progress>
`;
value = html` <ha-spinner size="small"></ha-spinner> `;
} else if (info.type === "failed") {
value = html`
<span class="error">${info.error}</span>${!info.more_info

11
src/panels/config/storage/dialog-move-datadisk.ts
View File

@ -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`
<ha-circular-progress
aria-label="Moving"
size="large"
indeterminate
>
</ha-circular-progress>
<ha-spinner aria-label="Moving" size="large"> </ha-spinner>
<p class="progress-text">
${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;

4
src/panels/config/users/dialog-add-user.ts
View File

@ -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`
<div slot="primaryAction" class="submit-spinner">
<ha-circular-progress indeterminate></ha-circular-progress>
<ha-spinner></ha-spinner>
</div>
`
: html`

6
src/panels/config/voice-assistants/debug/assist-render-pipeline-run.ts
View File

@ -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`
<ha-circular-progress size="small" indeterminate></ha-circular-progress>
`;
return html` <ha-spinner size="small"></ha-spinner> `;
}
const duration =

6
src/panels/developer-tools/statistics/dialog-statistics-adjust-sum.ts
View File

@ -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`<ha-circular-progress indeterminate></ha-circular-progress>`;
stats = html`<ha-spinner></ha-spinner>`;
} else if (this._statsHour.length < 1 && this._stats5min.length < 1) {
stats = html`<p>
${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;
}
`,

7
src/panels/developer-tools/statistics/dialog-statistics-fix.ts
View File

@ -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`<ha-circular-progress
indeterminate
? html`<ha-spinner
size="small"
aria-label="Saving"
></ha-circular-progress>`
></ha-spinner>`
: nothing}
${this.hass.localize("ui.common.delete")}
</mwc-button>

7
src/panels/developer-tools/template/developer-tools-template.ts
View File

@ -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 {
>
<div class="card-content">
${this._rendering
? html`<ha-circular-progress
? html`<ha-spinner
class="render-spinner"
indeterminate
size="small"
></ha-circular-progress>`
></ha-spinner>`
: ""}
${this._error
? html`<ha-alert

4
src/panels/developer-tools/yaml_configuration/developer-yaml-config.ts
View File

@ -6,7 +6,7 @@ import { componentsWithService } from "../../../common/config/components_with_se
import "../../../components/buttons/ha-call-service-button";
import "../../../components/ha-alert";
import "../../../components/ha-card";
import "../../../components/ha-circular-progress";
import "../../../components/ha-spinner";
import type { CheckConfigResult } from "../../../data/core";
import { checkCoreConfig } from "../../../data/core";
import { domainToName } from "../../../data/integration";
@ -94,7 +94,7 @@ export class DeveloperYamlConfig extends LitElement {
? html`<div
class="validate-container layout vertical center-center"
>
<ha-circular-progress indeterminate></ha-circular-progress>
<ha-spinner></ha-spinner>
</div> `
: nothing
: html`

4
src/panels/history/ha-panel-history.ts
View File

@ -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 {
</div>
${this._isLoading
? html`<div class="progress-wrapper">
<ha-circular-progress indeterminate></ha-circular-progress>
<ha-spinner></ha-spinner>
</div>`
: !entitiesSelected
? html`<div class="start-search">

1
src/panels/logbook/ha-logbook-renderer.ts
View File

@ -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";

4
src/panels/logbook/ha-logbook.ts
View File

@ -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`
<div class="progress-wrapper">
<ha-circular-progress indeterminate></ha-circular-progress>
<ha-spinner></ha-spinner>
</div>
`;
}

6
src/panels/lovelace/cards/hui-starting-card.ts
View File

@ -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`
<div class="content">
<ha-circular-progress indeterminate></ha-circular-progress>
<ha-spinner></ha-spinner>
${this.hass.localize("ui.panel.lovelace.cards.starting.description")}
</div>
`;
@ -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 {

8
src/panels/lovelace/components/hui-image.ts
View File

@ -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,
})}
>
<ha-circular-progress
class="render-spinner"
indeterminate
size="small"
></ha-circular-progress>
<ha-spinner class="render-spinner" size="small"></ha-spinner>
</div>`
: ""}
</div>

Some files were not shown because too many files have changed in this diff Show More