Leave Bluetooth advertisement loading for the follow-up

Co-authored-by: Copilot Autofix powered by AI <[email protected]>

.agents/skills/ha-frontend-review/SKILL.md

@@ -118,7 +118,8 @@ For user-facing changes, establish the existing design context as part of fronte
 - Before reviewing a pull request, read its existing comments, reviews, and threads, including their status, resolver, and Copilot resolution reason when available.
 - Prioritise substantive human feedback, especially from authors marked `MEMBER`, and validate agent-generated feedback against the code and repository guidance.
 - Do not duplicate unresolved findings as new inline comments; reference any that still need action in the review summary. Treat resolved feedback as closed only when the resolution reason or surrounding discussion supports that outcome; otherwise validate it against the current code before suppressing it. Respect **Won't fix** and **Incorrect** reasons.
-- Identify behavioral regressions, bugs, accessibility issues, and missing tests first.
+- Identify behavioral regressions, bugs, accessibility issues, and missing tests that `ha-frontend-testing` calls for first.
+- Do not ask for new tests on visual components. If the visuals clearly changed and the PR has no screenshots or videos, suggest adding them instead.
 - Record the applicable UI/UX evidence for user-facing changes, whether or not further input is needed.
 - Keep style-only comments secondary unless they affect maintainability or user experience.
 - Prefer small, direct fixes over large refactors during review follow-up.

.agents/skills/ha-frontend-testing/SKILL.md

@@ -51,10 +51,10 @@ Managed app, demo, gallery, and E2E app workflows share one lifetime lock, so on
 
 ## When To Add Tests
 
-- Write tests for code that computes something: data processing, utility functions, config validation, and what happens when the user interacts with a component.
-- Do not write tests that check what a component looks like: its text, CSS classes, styles, or slots. Do not write tests that check the default value of an option.
-- A component that only takes data from contexts and helpers and puts it in a template does not need a test.
-- If you are not sure a test is useful, describe the test and what it would catch, and let the user decide.
+- Write tests for code that computes something: data processing, utilities, config validation, and strategies.
+- Do not write rendering tests. This includes views, panels, and components whose text, styles, slots, or option defaults are checked, or that only put context and helper data into a template.
+- Do not try to cover every scenario, especially for behaviour that changes often.
+- If you are not sure a test is useful, describe it and what it would catch, and let the user decide.
 - Tests never talk to a real Home Assistant. Replace `callWS`, `callApi`, and the connection with fakes.
 
 ## Dev Servers

src/components/data-table/ha-data-table.ts

@@ -32,8 +32,11 @@ import { internationalizationContext } from "../../data/context";
 import type { FrontendLocaleData } from "../../data/translation";
 import { haStyleScrollbar } from "../../resources/styles";
 import { loadVirtualizer } from "../../resources/virtualizer";
+import "../animation/ha-fade-in";
 import "../ha-checkbox";
 import type { HaCheckbox } from "../ha-checkbox";
+import "../skeleton/ha-skeleton-icon";
+import "../skeleton/ha-skeleton-text";
 import "../ha-svg-icon";
 import "../input/ha-input-search";
 import { filterData, sortData } from "./sort-filter";
@@ -111,6 +114,25 @@ export type SortableColumnContainer = Record<string, ClonedDataTableColumnData>;
 const UNDEFINED_GROUP_KEY = "zzzzz_undefined";
 const AUTO_FOCUS_ALLOWED_ACTIVE_TAGS = ["BODY", "HTML", "HOME-ASSISTANT"];
 
+// Default row height, used to fill the viewport with skeleton rows.
+const ROW_HEIGHT = 52;
+
+const cellClasses = (column: DataTableColumnData) => ({
+  "mdc-data-table__cell--flex": column.type === "flex",
+  "mdc-data-table__cell--numeric": column.type === "numeric",
+  "mdc-data-table__cell--icon": column.type === "icon",
+  "mdc-data-table__cell--icon-button": column.type === "icon-button",
+  "mdc-data-table__cell--overflow-menu": column.type === "overflow-menu",
+  "mdc-data-table__cell--overflow": column.type === "overflow",
+  forceLTR: Boolean(column.forceLTR),
+});
+
+const cellStyles = (column: DataTableColumnData) => ({
+  minWidth: column.minWidth,
+  maxWidth: column.maxWidth,
+  flex: column.flex || 1,
+});
+
 @customElement("ha-data-table")
 export class HaDataTable extends LitElement {
   @state()
@@ -123,6 +145,8 @@ export class HaDataTable extends LitElement {
 
   @property({ type: Array }) public data: DataTableRowData[] = [];
 
+  @property({ type: Boolean }) public loading = false;
+
   @property({ type: Boolean }) public selectable = false;
 
   @property({ type: Boolean }) public clickable = false;
@@ -165,6 +189,9 @@ export class HaDataTable extends LitElement {
 
   @state() private _filteredData?: DataTableRowData[];
 
+  // Row count of the data that _filteredData was computed from
+  @state() private _filteredDataSourceLength = 0;
+
   @state() private _headerHeight = 0;
 
   @query("slot[name='header']") private _header!: HTMLSlotElement;
@@ -515,18 +542,77 @@ export class HaDataTable extends LitElement {
           </div>
           ${
             !this._filteredData?.length
-              ? html`
-                  <div class="mdc-data-table__content">
-                    <div class="mdc-data-table__row" role="row">
-                      <div
-                        class="mdc-data-table__cell grows center"
-                        role="cell"
-                      >
-                        ${
-                          !this._filteredData
-                            ? this._i18n?.localize?.("ui.common.loading") ||
-                              "Loading"
-                            : this.data.length
+              ? this.loading ||
+                !this._filteredData ||
+                (this.data.length && !this._filteredDataSourceLength)
+                ? html`
+                    <div class="mdc-data-table__content" role="row">
+                      <ha-fade-in role="cell" .duration=${300} easing="ease-in">
+                        <div
+                          role="progressbar"
+                          aria-label=${
+                            this._i18n?.localize?.("ui.common.loading") ||
+                            "Loading"
+                          }
+                        >
+                          ${Array.from(
+                            {
+                              length: this.autoHeight
+                                ? 1
+                                : Math.ceil(window.innerHeight / ROW_HEIGHT),
+                            },
+                            () => html`
+                              <div class="mdc-data-table__row">
+                                ${
+                                  this.selectable
+                                    ? html`<div
+                                        class="mdc-data-table__cell mdc-data-table__cell--checkbox"
+                                      ></div>`
+                                    : nothing
+                                }
+                                ${Object.entries(columns).map(
+                                  ([key, column]) =>
+                                    (this.narrow &&
+                                      !column.main &&
+                                      !column.showNarrow) ||
+                                    !this._isColumnVisible(key, column)
+                                      ? nothing
+                                      : html`
+                                          <div
+                                            class="mdc-data-table__cell ${classMap(
+                                              cellClasses(column)
+                                            )}"
+                                            style=${styleMap(cellStyles(column))}
+                                          >
+                                            ${
+                                              column.type === "icon"
+                                                ? html`<ha-skeleton-icon></ha-skeleton-icon>`
+                                                : column.type ===
+                                                      "icon-button" ||
+                                                    column.type ===
+                                                      "overflow-menu"
+                                                  ? nothing
+                                                  : html`<ha-skeleton-text></ha-skeleton-text>`
+                                            }
+                                          </div>
+                                        `
+                                )}
+                              </div>
+                            `
+                          )}
+                        </div>
+                      </ha-fade-in>
+                    </div>
+                  `
+                : html`
+                    <div class="mdc-data-table__content">
+                      <div class="mdc-data-table__row" role="row">
+                        <div
+                          class="mdc-data-table__cell grows center"
+                          role="cell"
+                        >
+                          ${
+                            this.data.length
                               ? this._i18n?.localize?.(
                                   "ui.components.data-table.no_match_filter"
                                 ) || "No rows matching current filters"
@@ -535,11 +621,11 @@ export class HaDataTable extends LitElement {
                                   "ui.components.data-table.no-data"
                                 ) ||
                                 "No data"
-                        }
+                          }
+                        </div>
                       </div>
                     </div>
-                  </div>
-                `
+                  `
               : html`
                   <lit-virtualizer
                     scroller
@@ -633,22 +719,8 @@ export class HaDataTable extends LitElement {
               @mouseover=${this._setTitle}
               @focus=${this._setTitle}
               role=${column.main ? "rowheader" : "cell"}
-              class="mdc-data-table__cell ${classMap({
-                "mdc-data-table__cell--flex": column.type === "flex",
-                "mdc-data-table__cell--numeric": column.type === "numeric",
-                "mdc-data-table__cell--icon": column.type === "icon",
-                "mdc-data-table__cell--icon-button":
-                  column.type === "icon-button",
-                "mdc-data-table__cell--overflow-menu":
-                  column.type === "overflow-menu",
-                "mdc-data-table__cell--overflow": column.type === "overflow",
-                forceLTR: Boolean(column.forceLTR),
-              })}"
-              style=${styleMap({
-                minWidth: column.minWidth,
-                maxWidth: column.maxWidth,
-                flex: column.flex || 1,
-              })}
+              class="mdc-data-table__cell ${classMap(cellClasses(column))}"
+              style=${styleMap(cellStyles(column))}
             >
               ${
                 column.template
@@ -721,10 +793,11 @@ export class HaDataTable extends LitElement {
       !this._lastUpdate ||
       (timeBetweenUpdate > 500 && timeBetweenRequest < 500);
 
-    let filteredData = this.data;
+    const sourceData = this.data;
+    let filteredData = sourceData;
     if (this._filter) {
       filteredData = await this._memFilterData(
-        this.data,
+        sourceData,
         this._sortColumns,
         this._filter.trim()
       );
@@ -760,8 +833,13 @@ export class HaDataTable extends LitElement {
       return;
     }
 
+    if (startTime < this._lastUpdate) {
+      return;
+    }
+
     this._lastUpdate = startTime;
     this._filteredData = data;
+    this._filteredDataSourceLength = sourceData.length;
   }
 
   private _groupData = memoizeOne(
@@ -1317,7 +1395,8 @@ export class HaDataTable extends LitElement {
         .mdc-data-table__cell--icon:first-child ha-svg-icon,
         .mdc-data-table__cell--icon:first-child ha-state-icon,
         .mdc-data-table__cell--icon:first-child ha-domain-icon,
-        .mdc-data-table__cell--icon:first-child ha-service-icon {
+        .mdc-data-table__cell--icon:first-child ha-service-icon,
+        .mdc-data-table__cell--icon:first-child ha-skeleton-icon {
           margin-left: 8px;
           margin-inline-start: 8px;
           margin-inline-end: initial;

src/components/skeleton/ha-skeleton-icon.ts

@@ -0,0 +1,34 @@
+import type { CSSResultGroup } from "lit";
+import { css } from "lit";
+import { customElement } from "lit/decorators";
+import { HaSkeleton } from "./ha-skeleton";
+
+/**
+ * Placeholder for an icon. Follows `ha-svg-icon`'s `--mdc-icon-size`
+ * (24px by default), including inherited size overrides.
+ */
+@customElement("ha-skeleton-icon")
+export class HaSkeletonIcon extends HaSkeleton {
+  static get styles(): CSSResultGroup {
+    return [
+      super.styles,
+      css`
+        :host {
+          display: inline-flex;
+          vertical-align: middle;
+          flex: none;
+          width: var(--mdc-icon-size, 24px);
+          height: var(--mdc-icon-size, 24px);
+          min-height: 0;
+          --ha-skeleton-border-radius: var(--ha-border-radius-circle);
+        }
+      `,
+    ];
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "ha-skeleton-icon": HaSkeletonIcon;
+  }
+}

src/components/skeleton/ha-skeleton-text.ts

@@ -0,0 +1,36 @@
+import type { CSSResultGroup } from "lit";
+import { css } from "lit";
+import { customElement } from "lit/decorators";
+import { HaSkeleton } from "./ha-skeleton";
+
+/**
+ * Placeholder for a line of text, matching the tile secondary text skeleton.
+ * Its height follows the surrounding font size. Set `width` in CSS to fit the
+ * expected text.
+ *
+ * @cssprop --ha-skeleton-text-width - The width of the placeholder. defaults to `140px`.
+ */
+@customElement("ha-skeleton-text")
+export class HaSkeletonText extends HaSkeleton {
+  static get styles(): CSSResultGroup {
+    return [
+      super.styles,
+      css`
+        :host {
+          display: inline-flex;
+          vertical-align: middle;
+          width: var(--ha-skeleton-text-width, 140px);
+          max-width: 100%;
+          height: 1em;
+          min-height: 0;
+        }
+      `,
+    ];
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "ha-skeleton-text": HaSkeletonText;
+  }
+}

src/components/skeleton/ha-skeleton.ts

@@ -0,0 +1,59 @@
+import WaSkeleton from "@home-assistant/webawesome/dist/components/skeleton/skeleton";
+import type { CSSResultGroup } from "lit";
+import { css } from "lit";
+import { customElement } from "lit/decorators";
+
+/**
+ * Placeholder shown while content loads. Sized by its container unless a
+ * more specific variant such as `ha-skeleton-text` or `ha-skeleton-icon` is used.
+ *
+ * @cssprop --ha-skeleton-color - The fill color. defaults to `var(--ha-color-fill-neutral-normal-resting)`.
+ * @cssprop --ha-skeleton-sheen-color - The sheen color when `effect="sheen"`. defaults to `var(--ha-color-fill-neutral-loud-resting)`.
+ * @cssprop --ha-skeleton-border-radius - The corner radius. defaults to `var(--ha-border-radius-sm)`.
+ */
+@customElement("ha-skeleton")
+export class HaSkeleton extends WaSkeleton {
+  constructor() {
+    super();
+    this.effect = "pulse";
+  }
+
+  static get styles(): CSSResultGroup {
+    return [
+      WaSkeleton.styles,
+      css`
+        :host {
+          --color: var(
+            --ha-skeleton-color,
+            var(--ha-color-fill-neutral-normal-resting)
+          );
+          --sheen-color: var(
+            --ha-skeleton-sheen-color,
+            var(--ha-color-fill-neutral-loud-resting)
+          );
+          --wa-border-radius-pill: var(
+            --ha-skeleton-border-radius,
+            var(--ha-border-radius-sm)
+          );
+        }
+        @media (forced-colors: active) {
+          :host {
+            --color: GrayText;
+          }
+        }
+        @media (prefers-reduced-motion: reduce) {
+          :host([effect="pulse"]) .indicator,
+          :host([effect="sheen"]) .indicator {
+            animation: none;
+          }
+        }
+      `,
+    ];
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "ha-skeleton": HaSkeleton;
+  }
+}

src/components/tile/ha-tile-info.ts

@@ -1,4 +1,4 @@
-import "@home-assistant/webawesome/dist/components/skeleton/skeleton";
+import "../skeleton/ha-skeleton-text";
 import { css, html, LitElement } from "lit";
 import { customElement, property } from "lit/decorators";
 
@@ -49,7 +49,7 @@ export class HaTileInfo extends LitElement {
         ${
           this.secondaryLoading
             ? html`<div class="secondary">
-                <wa-skeleton class="placeholder" effect="pulse"></wa-skeleton>
+                <ha-skeleton-text></ha-skeleton-text>
               </div>`
             : html`<slot name="secondary" class="secondary">
                 <span>${this.secondary}</span>
@@ -150,14 +150,6 @@ export class HaTileInfo extends LitElement {
       letter-spacing: var(--tile-info-secondary-letter-spacing);
       color: var(--tile-info-secondary-color);
     }
-    .placeholder {
-      width: 140px;
-      max-width: 100%;
-      height: var(--tile-info-secondary-font-size);
-      --wa-border-radius-pill: var(--ha-border-radius-sm);
-      --color: var(--ha-color-fill-neutral-normal-resting);
-      --sheen-color: var(--ha-color-fill-neutral-loud-resting);
-    }
   `;
 }
 

src/dialogs/more-info/components/update/ha-more-info-update-backup.ts

@@ -1,4 +1,5 @@
-import "@home-assistant/webawesome/dist/components/skeleton/skeleton";
+import "../../../../components/skeleton/ha-skeleton";
+import "../../../../components/skeleton/ha-skeleton-text";
 import { consume } from "@lit/context";
 import type { HassConfig } from "home-assistant-js-websocket";
 import { css, html, LitElement, nothing } from "lit";
@@ -112,14 +113,14 @@ export class HaMoreInfoUpdateBackup extends LitElement {
         ${
           !createBackupTexts
             ? html`<ha-fade-in slot="headline" .delay=${500}
-                ><wa-skeleton effect="sheen"></wa-skeleton
+                ><ha-skeleton-text></ha-skeleton-text
               ></ha-fade-in>`
             : nothing
         }
         ${
           this._createBackupLoading
             ? html`<ha-fade-in class="skeleton-end" slot="end" .delay=${500}
-                ><wa-skeleton effect="sheen"></wa-skeleton
+                ><ha-skeleton></ha-skeleton
               ></ha-fade-in>`
             : html`<ha-switch
                 slot="end"
@@ -307,6 +308,7 @@ export class HaMoreInfoUpdateBackup extends LitElement {
       width: 48px;
       height: 24px;
       display: block;
+      --ha-skeleton-border-radius: var(--ha-border-radius-pill);
     }
   `;
 }

src/layouts/hass-tabs-subpage-data-table.ts

@@ -154,6 +154,12 @@ export class HaTabsSubpageDataTable extends KeyboardShortcutMixin(LitElement) {
    */
   @property({ type: Boolean }) public empty = false;
 
+  /**
+   * Show a loading state instead of the empty message until data is ready.
+   * @type {Boolean}
+   */
+  @property({ type: Boolean }) public loading = false;
+
   @property({ attribute: false }) public route!: Route;
 
   /**
@@ -492,7 +498,7 @@ export class HaTabsSubpageDataTable extends KeyboardShortcutMixin(LitElement) {
             : nothing
         }
         ${
-          this.empty
+          this.empty && !this.loading
             ? html`<div class="center">
                 <slot name="empty">${this.noDataText}</slot>
               </div>`
@@ -514,6 +520,7 @@ export class HaTabsSubpageDataTable extends KeyboardShortcutMixin(LitElement) {
                   .narrow=${this.narrow}
                   .columns=${this.columns}
                   .data=${this.data}
+                  .loading=${this.loading}
                   .noDataText=${this.noDataText}
                   .filter=${this.filter}
                   .selectable=${this._selectMode}

src/onboarding/render-skeleton.ts

@@ -1,35 +1,29 @@
-import "@home-assistant/webawesome/dist/components/skeleton/skeleton";
 import type { TemplateResult } from "lit";
 import { css, html } from "lit";
+import "../components/skeleton/ha-skeleton-text";
 
 /** Placeholder shown in place of a text while onboarding translations load. */
 export const renderSkeleton = (variant: string): TemplateResult =>
-  html`<wa-skeleton effect="sheen" class="skeleton ${variant}"></wa-skeleton>`;
+  html`<ha-skeleton-text class="skeleton ${variant}"></ha-skeleton-text>`;
 
 export const skeletonStyles = css`
-  .skeleton {
-    height: 1em;
-    vertical-align: middle;
-    --color: var(--ha-color-fill-neutral-normal-resting);
-    --sheen-color: var(--ha-color-fill-neutral-loud-resting);
-  }
   .skeleton.title {
-    width: 200px;
+    --ha-skeleton-text-width: 200px;
   }
   .skeleton.line {
-    width: 100%;
+    --ha-skeleton-text-width: 100%;
   }
   .skeleton.headline {
-    width: 40%;
+    --ha-skeleton-text-width: 40%;
     margin-bottom: var(--ha-space-1);
   }
   .skeleton.chip {
-    width: 80px;
+    --ha-skeleton-text-width: 80px;
   }
   .skeleton.button {
-    width: 120px;
+    --ha-skeleton-text-width: 120px;
   }
   .skeleton.label {
-    width: 80px;
+    --ha-skeleton-text-width: 80px;
   }
 `;

src/panels/config/application_credentials/ha-config-application-credentials.ts

@@ -37,6 +37,8 @@ export class HaConfigApplicationCredentials extends LitElement {
 
   @state() public _applicationCredentials: ApplicationCredential[] = [];
 
+  @state() private _loading = true;
+
   @property({ attribute: "is-wide", type: Boolean }) public isWide = false;
 
   @property({ type: Boolean }) public narrow = false;
@@ -154,6 +156,7 @@ export class HaConfigApplicationCredentials extends LitElement {
         back-path="/config"
         .tabs=${configSections.devices}
         .columns=${this._columns(this.hass.localize)}
+        .loading=${this._loading}
         .data=${this._getApplicationCredentials(
           this._applicationCredentials,
           this.hass.localize
@@ -278,7 +281,13 @@ export class HaConfigApplicationCredentials extends LitElement {
   }
 
   private async _fetchApplicationCredentials() {
-    this._applicationCredentials = await fetchApplicationCredentials(this.hass);
+    try {
+      this._applicationCredentials = await fetchApplicationCredentials(
+        this.hass
+      );
+    } finally {
+      this._loading = false;
+    }
   }
 
   private _addApplicationCredential() {

src/panels/config/areas/dialog-area-add-to.ts

@@ -204,7 +204,7 @@ class DialogAreaAddTo extends LitElement {
       haStyleDialog,
       css`
         ha-adaptive-dialog {
-          --dialog-content-padding: 0;
+          --dialog-content-padding: 0 0 var(--ha-space-6);
         }
       `,
     ];

src/panels/config/devices/device-detail/ha-device-add-to-dialog.ts

@@ -222,7 +222,7 @@ export class DialogDeviceAddTo extends LitElement {
       haStyleDialog,
       css`
         ha-adaptive-dialog {
-          --dialog-content-padding: 0;
+          --dialog-content-padding: 0 0 var(--ha-space-6);
         }
       `,
     ];

src/panels/config/devices/ha-config-devices-dashboard.ts

@@ -42,6 +42,8 @@ import type {
 import "../../../components/data-table/ha-data-table-labels";
 import "../../../components/entity/ha-battery-icon";
 import "../../../components/ha-alert";
+import "../../../components/skeleton/ha-skeleton-icon";
+import "../../../components/skeleton/ha-skeleton-text";
 import "../../../components/ha-button";
 import "../../../components/ha-dropdown";
 import type { HaDropdownSelectEvent } from "../../../components/ha-dropdown";
@@ -115,13 +117,13 @@ export class HaConfigDeviceDashboard extends LitElement {
 
   @property({ attribute: "is-wide", type: Boolean }) public isWide = false;
 
-  @property({ attribute: false }) public entries!: ConfigEntry[];
+  @property({ attribute: false }) public entries?: ConfigEntry[];
 
   @state() private _subEntries?: SubEntry[];
 
   @state()
   @consume({ context: fullEntitiesContext, subscribe: true })
-  entities: EntityRegistryEntry[] = [];
+  entities?: EntityRegistryEntry[];
 
   @property({ attribute: false }) public manifests!: IntegrationManifest[];
 
@@ -238,13 +240,13 @@ export class HaConfigDeviceDashboard extends LitElement {
       this._filters = this._storageFilters;
       this._setFiltersFromUrl();
     }
-    if (changedProps.has("_selected")) {
+    if (changedProps.has("_selected") || changedProps.has("entries")) {
       this._selectedCanDelete = this._selected.filter((d) => {
         const device = this.hass.devices[d];
         const entries = device.config_entries;
         return entries.some(
           (entryId) =>
-            this.entries.find((e) => e.entry_id === entryId)
+            this.entries?.find((e) => e.entry_id === entryId)
               ?.supports_remove_device
         );
       });
@@ -317,8 +319,8 @@ export class HaConfigDeviceDashboard extends LitElement {
   private _devicesAndFilterDomains = memoizeOne(
     (
       devices: HomeAssistant["devices"],
-      entries: ConfigEntry[],
-      entities: EntityRegistryEntry[],
+      entries: ConfigEntry[] = [],
+      entities: EntityRegistryEntry[] = [],
       areas: HomeAssistant["areas"],
       manifests: IntegrationManifest[],
       filters: DataTableFilters,
@@ -599,21 +601,23 @@ export class HaConfigDeviceDashboard extends LitElement {
         moveable: false,
         showNarrow: true,
         template: (device) =>
-          device.domains.length
-            ? html`<img
-                alt=""
-                crossorigin="anonymous"
-                referrerpolicy="no-referrer"
-                src=${brandsUrl(
-                  {
-                    domain: device.domains[0],
-                    type: "icon",
-                    darkOptimized: this.hass.themes?.darkMode,
-                  },
-                  this.hass.auth.data.hassUrl
-                )}
-              />`
-            : "",
+          !this.entries
+            ? html`<ha-skeleton-icon></ha-skeleton-icon>`
+            : device.domains.length
+              ? html`<img
+                  alt=""
+                  crossorigin="anonymous"
+                  referrerpolicy="no-referrer"
+                  src=${brandsUrl(
+                    {
+                      domain: device.domains[0],
+                      type: "icon",
+                      darkOptimized: this.hass.themes?.darkMode,
+                    },
+                    this.hass.auth.data.hassUrl
+                  )}
+                />`
+              : "",
       },
       name: {
         title: localize("ui.panel.config.devices.data_table.device"),
@@ -642,7 +646,9 @@ export class HaConfigDeviceDashboard extends LitElement {
                     .labels=${device.label_entries}
                   ></ha-data-table-labels>
                 `
-              : nothing
+              : device.labels.length && !this._labels
+                ? html`<ha-skeleton-text></ha-skeleton-text>`
+                : nothing
           }
         `,
       },
@@ -654,6 +660,10 @@ export class HaConfigDeviceDashboard extends LitElement {
         filterable: true,
         groupable: true,
         minWidth: "120px",
+        template: (device) =>
+          !this.entries
+            ? html`<ha-skeleton-text></ha-skeleton-text>`
+            : device.integration,
       },
       device_family_name: {
         title: localize("ui.panel.config.devices.data_table.parent_device"),
@@ -697,6 +707,9 @@ export class HaConfigDeviceDashboard extends LitElement {
         minWidth: "101px",
         valueColumn: "battery_level",
         template: (device) => {
+          if (!this.entities) {
+            return html`<ha-skeleton-text></ha-skeleton-text>`;
+          }
           const batteryEntityPair = device.battery_entity;
           const battery =
             batteryEntityPair && batteryEntityPair[0]
@@ -903,10 +916,13 @@ export class HaConfigDeviceDashboard extends LitElement {
                   "ui.panel.config.devices.filtering_by_config_entry"
                 )}
                 ${
-                  this.entries?.find(
-                    (entry) =>
-                      entry.entry_id === this._filters.config_entry!.value![0]
-                  )?.title || this._filters.config_entry.value[0]
+                  !this.entries
+                    ? html`<ha-skeleton-text></ha-skeleton-text>`
+                    : this.entries.find(
+                        (entry) =>
+                          entry.entry_id ===
+                          this._filters.config_entry!.value![0]
+                      )?.title || this._filters.config_entry.value[0]
                 }${
                   this._filters.config_entry.value.length === 1 &&
                   Array.isArray(this._filters.sub_entry?.value) &&
@@ -1357,6 +1373,9 @@ ${rejected
         ha-assist-chip {
           --ha-assist-chip-container-shape: 10px;
         }
+        ha-alert ha-skeleton-text {
+          --ha-skeleton-text-width: 100px;
+        }
         ha-dropdown::part(menu),
         ha-dropdown::part(submenu) {
           --auto-size-available-width: calc(50vw - var(--ha-space-4));

src/panels/config/devices/ha-config-devices.ts

@@ -31,13 +31,16 @@ class HaConfigDevices extends HassRouterPage {
     },
   };
 
-  @state() private _configEntries: ConfigEntry[] = [];
+  @state() private _configEntries?: ConfigEntry[];
 
   @state() private _manifests: IntegrationManifest[] = [];
 
-  protected firstUpdated(changedProps: PropertyValues<this>) {
-    super.firstUpdated(changedProps);
-    this._loadData();
+  protected willUpdate(changedProps: PropertyValues<this>) {
+    super.willUpdate(changedProps);
+
+    if (!this.hasUpdated) {
+      this._loadData();
+    }
   }
 
   protected updatePageEl(pageEl) {
@@ -45,9 +48,11 @@ class HaConfigDevices extends HassRouterPage {
 
     if (this._currentPage === "device") {
       pageEl.deviceId = this.routeTail.path.substr(1);
+      pageEl.entries = this._configEntries ?? [];
+    } else {
+      pageEl.entries = this._configEntries;
     }
 
-    pageEl.entries = this._configEntries;
     pageEl.manifests = this._manifests;
     pageEl.narrow = this.narrow;
     pageEl.isWide = this.isWide;
@@ -55,8 +60,16 @@ class HaConfigDevices extends HassRouterPage {
   }
 
   private async _loadData() {
-    this._configEntries = await getConfigEntries(this.hass);
-    this._manifests = await fetchIntegrationManifests(this.hass);
+    await Promise.all([
+      getConfigEntries(this.hass)
+        .catch(() => [])
+        .then((configEntries) => {
+          this._configEntries = configEntries;
+        }),
+      fetchIntegrationManifests(this.hass).then((manifests) => {
+        this._manifests = manifests;
+      }),
+    ]);
   }
 }
 

src/panels/config/hardware/ha-config-hardware-all.ts

@@ -38,6 +38,8 @@ class HaConfigHardwareAll extends LitElement {
 
   @state() private _error?: string;
 
+  @state() private _loading = true;
+
   private _columns = memoizeOne(
     (localize: LocalizeFunc): DataTableColumnContainer<HardwareDeviceRow> => ({
       name: {
@@ -98,6 +100,7 @@ class HaConfigHardwareAll extends LitElement {
         .tabs=${hardwareTabs(this.hass)}
         clickable
         .columns=${this._columns(this.hass.localize)}
+        .loading=${this._loading}
         .data=${this._hardware ? this._data(this._hardware) : []}
         .noDataText=${
           this._error ||
@@ -113,6 +116,8 @@ class HaConfigHardwareAll extends LitElement {
       this._hardware = await fetchHassioHardwareInfo(this.hass);
     } catch (err: any) {
       this._error = extractApiErrorMessage(err);
+    } finally {
+      this._loading = false;
     }
   }
 

src/panels/config/integrations/integration-panels/thread/thread-config-panel.ts

@@ -18,6 +18,9 @@ import "../../../../../components/ha-card";
 import "../../../../../components/ha-dropdown";
 import type { HaDropdownSelectEvent } from "../../../../../components/ha-dropdown";
 import "../../../../../components/ha-dropdown-item";
+import "../../../../../components/ha-icon-button";
+import "../../../../../components/ha-list-item";
+import "../../../../../components/ha-svg-icon";
 import { getSignedPath } from "../../../../../data/auth";
 import { getConfigEntryDiagnosticsDownloadUrl } from "../../../../../data/diagnostics";
 import type { OTBRInfo, OTBRInfoDict } from "../../../../../data/otbr";

src/panels/config/integrations/integration-panels/zha/zha-groups-dashboard.ts

@@ -45,6 +45,8 @@ export class ZHAGroupsDashboard extends LitElement {
 
   @state() private _groups: ZHAGroup[] = [];
 
+  @state() private _loading = true;
+
   private _firstUpdatedCalled = false;
 
   public connectedCallback(): void {
@@ -114,6 +116,7 @@ export class ZHAGroupsDashboard extends LitElement {
         .narrow=${this.narrow}
         .route=${this.route}
         .columns=${this._columns(this.hass.localize)}
+        .loading=${this._loading}
         .data=${this._formattedGroups(this._groups)}
         @row-click=${this._handleRowClicked}
         clickable
@@ -128,7 +131,11 @@ export class ZHAGroupsDashboard extends LitElement {
   }
 
   private async _fetchGroups() {
-    this._groups = (await fetchGroups(this.hass!)).sort(sortZHAGroups);
+    try {
+      this._groups = (await fetchGroups(this.hass!)).sort(sortZHAGroups);
+    } finally {
+      this._loading = false;
+    }
   }
 
   private _handleRowClicked(ev: HASSDomEvent<RowClickedEvent>) {

src/panels/config/integrations/integration-panels/zwave_js/zwave_js-provisioned.ts

@@ -30,6 +30,8 @@ class ZWaveJSProvisioned extends LitElement {
 
   @state() private _provisioningEntries: ZwaveJSProvisioningEntry[] = [];
 
+  @state() private _loading = true;
+
   @state() private _nodeIdToDevice: Record<number, DeviceRegistryEntry> = {};
 
   protected render() {
@@ -50,6 +52,7 @@ class ZWaveJSProvisioned extends LitElement {
           this.configEntryId
         }"
         .columns=${this._columns(this.hass.localize)}
+        .loading=${this._loading}
         .data=${this._getData(this._provisioningEntries, this._nodeIdToDevice)}
       >
       </hass-tabs-subpage-data-table>
@@ -176,10 +179,14 @@ class ZWaveJSProvisioned extends LitElement {
   }
 
   private async _fetchProvisioningEntries() {
-    this._provisioningEntries = await fetchZwaveProvisioningEntries(
-      this.hass!,
-      this.configEntryId
-    );
+    try {
+      this._provisioningEntries = await fetchZwaveProvisioningEntries(
+        this.hass!,
+        this.configEntryId
+      );
+    } finally {
+      this._loading = false;
+    }
   }
 
   private _unprovision = async (ev) => {

src/panels/config/labels/ha-config-labels.ts

@@ -108,6 +108,8 @@ export class HaConfigLabels extends LitElement {
 
   @state() private _labels: LabelRegistryEntry[] = [];
 
+  @state() private _loading = true;
+
   @state()
   @storage({
     storage: "sessionStorage",
@@ -258,6 +260,7 @@ export class HaConfigLabels extends LitElement {
         .tabs=${configSections.areas}
         .columns=${this._columns(this.hass.localize, this.narrow)}
         .data=${this._data(this._labels)}
+        .loading=${this._loading}
         .noDataText=${this.hass.localize("ui.panel.config.labels.no_labels")}
         has-fab
         .initialSorting=${this._activeSorting}
@@ -321,7 +324,11 @@ export class HaConfigLabels extends LitElement {
   }
 
   private async _fetchLabels() {
-    this._labels = await fetchLabelRegistry(this.hass.connection);
+    try {
+      this._labels = await fetchLabelRegistry(this.hass.connection);
+    } finally {
+      this._loading = false;
+    }
   }
 
   private _addLabel() {

src/panels/config/logs/dialog-system-log-detail.ts

@@ -1,4 +1,4 @@
-import "@home-assistant/webawesome/dist/components/skeleton/skeleton";
+import "../../../components/skeleton/ha-skeleton-text";
 import { consume, type ContextType } from "@lit/context";
 import { mdiContentCopy } from "@mdi/js";
 import type { CSSResultGroup, PropertyValues } from "lit";
@@ -188,8 +188,10 @@ class DialogSystemLogDetail extends LitElement {
           integration &&
           this._manifest === undefined &&
           reportTarget !== "frontend"
-            ? html`<ha-alert alert-type="info">
-                <wa-skeleton effect="sheen"></wa-skeleton>
+            ? html`<ha-alert
+                alert-type=${this.isCustomIntegration ? "warning" : "info"}
+              >
+                <ha-skeleton-text></ha-skeleton-text>
               </ha-alert>`
             : html`<ha-alert
                 alert-type=${this.isCustomIntegration ? "warning" : "info"}
@@ -421,10 +423,22 @@ class DialogSystemLogDetail extends LitElement {
         ha-alert p + p {
           margin-block-start: var(--ha-space-2);
         }
-        wa-skeleton {
-          height: 1em;
-          --color: var(--ha-color-fill-neutral-normal-resting);
-          --sheen-color: var(--ha-color-fill-neutral-loud-resting);
+        ha-skeleton-text {
+          --ha-skeleton-text-width: 320px;
+        }
+        ha-alert[alert-type="info"] ha-skeleton-text {
+          --ha-skeleton-color: color-mix(
+            in srgb,
+            var(--info-color) 24%,
+            transparent
+          );
+        }
+        ha-alert[alert-type="warning"] ha-skeleton-text {
+          --ha-skeleton-color: color-mix(
+            in srgb,
+            var(--warning-color) 24%,
+            transparent
+          );
         }
         .contents {
           outline: none;

src/panels/config/lovelace/dashboards/ha-config-lovelace-dashboards.ts

@@ -101,6 +101,8 @@ export class HaConfigLovelaceDashboards extends LitElement {
 
   @state() private _dashboards: LovelaceDashboard[] = [];
 
+  @state() private _loading = true;
+
   @state()
   @storage({
     storage: "sessionStorage",
@@ -409,6 +411,7 @@ export class HaConfigLovelaceDashboards extends LitElement {
           this._dashboards,
           this.hass.localize
         )}
+        .loading=${this._loading}
         .data=${this._getItems(
           this._dashboards,
           defaultPanel,
@@ -476,7 +479,11 @@ export class HaConfigLovelaceDashboards extends LitElement {
   }
 
   private async _getDashboards() {
-    this._dashboards = await fetchDashboards(this.hass);
+    try {
+      this._dashboards = await fetchDashboards(this.hass);
+    } finally {
+      this._loading = false;
+    }
   }
 
   private _handleRowClicked(ev: CustomEvent) {

src/panels/config/tags/ha-config-tags.ts

@@ -58,6 +58,8 @@ export class HaConfigTags extends SubscribeMixin(LitElement) {
 
   @state() private _tags: Tag[] = [];
 
+  @state() private _loading = true;
+
   private get _canWriteTags() {
     return this.hass.auth.external?.config.canWriteTag;
   }
@@ -195,6 +197,7 @@ export class HaConfigTags extends SubscribeMixin(LitElement) {
         .route=${this.route}
         .tabs=${configSections.tags}
         .columns=${this._columns(this.hass.localize)}
+        .loading=${this._loading}
         .data=${this._data(this._tags)}
         .noDataText=${this.hass.localize("ui.panel.config.tag.no_tags")}
         .filter=${this._filter}
@@ -266,7 +269,11 @@ export class HaConfigTags extends SubscribeMixin(LitElement) {
   }
 
   private async _fetchTags() {
-    this._tags = await fetchTags(this.hass);
+    try {
+      this._tags = await fetchTags(this.hass);
+    } finally {
+      this._loading = false;
+    }
   }
 
   private _openWrite(tag: Tag) {

src/panels/config/tools/statistics/dialog-statistics-fix.ts

@@ -10,7 +10,7 @@ import { clearStatistics, getStatisticLabel } from "../../../../data/recorder";
 import { haStyle, haStyleDialog } from "../../../../resources/styles";
 import type { HomeAssistant } from "../../../../types";
 import { documentationUrl } from "../../../../util/documentation-url";
-import { showAlertDialog } from "../../../lovelace/custom-card-helpers";
+import { showAlertDialog } from "../../../../dialogs/generic/show-dialog-box";
 import type { DialogStatisticsFixParams } from "./show-dialog-statistics-fix";
 
 @customElement("dialog-statistics-fix")

src/panels/config/tools/statistics/tools-statistics.ts

@@ -13,7 +13,14 @@ import {
 import "@home-assistant/webawesome/dist/components/divider/divider";
 import type { HassEntity } from "home-assistant-js-websocket";
 import { consume, type ContextType } from "@lit/context";
-import { css, type CSSResultGroup, html, LitElement, nothing } from "lit";
+import {
+  css,
+  type CSSResultGroup,
+  html,
+  LitElement,
+  nothing,
+  type PropertyValues,
+} from "lit";
 import { customElement, property, query, state } from "lit/decorators";
 import memoizeOne from "memoize-one";
 import type {
@@ -67,7 +74,7 @@ import { getAreaTableColumn } from "../../common/data-table-columns";
 import { KeyboardShortcutMixin } from "../../../../mixins/keyboard-shortcut-mixin";
 import { haStyle } from "../../../../resources/styles";
 import type { HomeAssistantRegistries } from "../../../../types";
-import { showConfirmationDialog } from "../../../lovelace/custom-card-helpers";
+import { showConfirmationDialog } from "../../../../dialogs/generic/show-dialog-box";
 import { fixStatisticsIssue } from "./fix-statistics";
 import { showStatisticsAdjustSumDialog } from "./show-dialog-statistics-adjust-sum";
 
@@ -108,6 +115,8 @@ class HaPanelDevStatistics extends KeyboardShortcutMixin(LitElement) {
 
   @state() private _data: StatisticData[] = [] as StatisticsMetaData[];
 
+  @state() private _loading = true;
+
   @state() private filter = "";
 
   @state() private _selected: string[] = [];
@@ -146,8 +155,12 @@ class HaPanelDevStatistics extends KeyboardShortcutMixin(LitElement) {
 
   @query("ha-input-search") private _searchInput!: HaInputSearch;
 
-  protected firstUpdated() {
-    this._validateStatistics();
+  protected willUpdate(changedProps: PropertyValues<this>) {
+    super.willUpdate(changedProps);
+
+    if (!this.hasUpdated) {
+      this._validateStatistics();
+    }
   }
 
   private _displayData = memoizeOne(
@@ -554,6 +567,7 @@ class HaPanelDevStatistics extends KeyboardShortcutMixin(LitElement) {
         }
         <ha-data-table
           .narrow=${this.narrow}
+          .loading=${this._loading}
           .columns=${columns}
           .data=${this._displayData(
             this._data,
@@ -722,38 +736,42 @@ class HaPanelDevStatistics extends KeyboardShortcutMixin(LitElement) {
   }
 
   private async _validateStatistics() {
-    const [statisticIds, issues] = await Promise.all([
-      getStatisticIds(this._api),
-      validateStatistics(this._api),
-    ]);
+    try {
+      const [statisticIds, issues] = await Promise.all([
+        getStatisticIds(this._api),
+        validateStatistics(this._api),
+      ]);
 
-    updateStatisticsIssues(this._api);
+      updateStatisticsIssues(this._api);
 
-    const statsIds = new Set();
+      const statsIds = new Set();
 
-    this._data = statisticIds.map((statistic) => {
-      statsIds.add(statistic.statistic_id);
-      return {
-        ...statistic,
-        state: this._states[statistic.statistic_id],
-        issues: issues[statistic.statistic_id],
-      };
-    });
+      this._data = statisticIds.map((statistic) => {
+        statsIds.add(statistic.statistic_id);
+        return {
+          ...statistic,
+          state: this._states[statistic.statistic_id],
+          issues: issues[statistic.statistic_id],
+        };
+      });
 
-    Object.keys(issues).forEach((statisticId) => {
-      if (!statsIds.has(statisticId)) {
-        this._data.push({
-          statistic_id: statisticId,
-          statistics_unit_of_measurement: "",
-          source: "",
-          state: this._states[statisticId],
-          issues: issues[statisticId],
-          mean_type: StatisticMeanType.NONE,
-          has_sum: false,
-          unit_class: null,
-        });
-      }
-    });
+      Object.keys(issues).forEach((statisticId) => {
+        if (!statsIds.has(statisticId)) {
+          this._data.push({
+            statistic_id: statisticId,
+            statistics_unit_of_measurement: "",
+            source: "",
+            state: this._states[statisticId],
+            issues: issues[statisticId],
+            mean_type: StatisticMeanType.NONE,
+            has_sum: false,
+            unit_class: null,
+          });
+        }
+      });
+    } finally {
+      this._loading = false;
+    }
   }
 
   private _clearSelected = async () => {

src/panels/config/users/ha-config-users.ts

@@ -40,6 +40,8 @@ export class HaConfigUsers extends LitElement {
 
   @state() private _users: User[] = [];
 
+  @state() private _loading = true;
+
   @storage({ key: "users-table-sort", state: false, subscribe: false })
   private _activeSorting?: SortingChangedEvent;
 
@@ -179,6 +181,7 @@ export class HaConfigUsers extends LitElement {
         back-path="/config"
         .tabs=${configSections.persons}
         .columns=${this._columns(this.narrow, this.hass.localize)}
+        .loading=${this._loading}
         .data=${this._userData(this._users, this.hass.localize)}
         .columnOrder=${this._activeColumnOrder}
         .hiddenColumns=${this._activeHiddenColumns}
@@ -212,7 +215,11 @@ export class HaConfigUsers extends LitElement {
   );
 
   private async _fetchUsers() {
-    this._users = await fetchUsers(this.hass);
+    try {
+      this._users = await fetchUsers(this.hass);
+    } finally {
+      this._loading = false;
+    }
 
     this._users.forEach((user) => {
       if (user.is_owner) {

src/panels/profile/ha-refresh-tokens-card.ts

@@ -340,6 +340,9 @@ class HaRefreshTokens extends LitElement {
         ha-list-item-base {
           --ha-row-item-padding-inline: 0;
         }
+        [slot="supporting-text"] {
+          white-space: normal;
+        }
         ha-icon-button {
           color: var(--primary-text-color);
         }

src/resources/virtualizer.ts

@@ -1,3 +1,7 @@
 export const loadVirtualizer = async () => {
-  await import("@lit-labs/virtualizer");
+  // The default flow layout is otherwise only fetched once there are items.
+  await Promise.all([
+    import("@lit-labs/virtualizer"),
+    import("@lit-labs/virtualizer/layouts/flow.js"),
+  ]);
 };