From 268c0a60f0782ab0bf7ad449836ff8caabe89ea1 Mon Sep 17 00:00:00 2001 From: Matthias de Baat Date: Wed, 11 Mar 2026 16:47:41 +0100 Subject: [PATCH] Faster load Zigbee numbers (#30096) --- .../zha/zha-config-dashboard.ts | 115 +++++++++--------- 1 file changed, 59 insertions(+), 56 deletions(-) diff --git a/src/panels/config/integrations/integration-panels/zha/zha-config-dashboard.ts b/src/panels/config/integrations/integration-panels/zha/zha-config-dashboard.ts index e3ebe417bc..a3d0d06ad0 100644 --- a/src/panels/config/integrations/integration-panels/zha/zha-config-dashboard.ts +++ b/src/panels/config/integrations/integration-panels/zha/zha-config-dashboard.ts @@ -13,6 +13,7 @@ import { import type { CSSResultGroup, PropertyValues, TemplateResult } from "lit"; import { css, html, LitElement, nothing } from "lit"; import { customElement, property, state } from "lit/decorators"; +import { animationStyles } from "../../../../../resources/theme/animations.globals"; import "../../../../../components/ha-alert"; import "../../../../../components/ha-button"; import "../../../../../components/ha-card"; @@ -26,14 +27,12 @@ import { getConfigEntries } from "../../../../../data/config_entries"; import type { ZHAConfiguration, ZHANetworkBackupAndMetadata, - ZHANetworkSettings, } from "../../../../../data/zha"; import { createZHANetworkBackup, fetchDevices, fetchGroups, fetchZHAConfiguration, - fetchZHANetworkSettings, } from "../../../../../data/zha"; import { showOptionsFlowDialog } from "../../../../../dialogs/config-flow/show-dialog-options-flow"; import { showAlertDialog } from "../../../../../dialogs/generic/show-dialog-box"; @@ -56,13 +55,11 @@ class ZHAConfigDashboard extends LitElement { @state() private _configuration?: ZHAConfiguration; - @state() private _totalDevices = 0; - @state() private _offlineDevices = 0; - @state() private _totalGroups = 0; + @state() private _totalGroups?: number; - @state() private _networkSettings?: ZHANetworkSettings; + @state() private _asyncDataLoaded = false; @state() private _error?: string; @@ -72,15 +69,23 @@ class ZHAConfigDashboard extends LitElement { this.hass.loadBackendTranslation("config_panel", "zha", false); this._fetchConfigEntry(); this._fetchConfiguration(); - this._fetchDevicesAndUpdateStatus(); - this._fetchGroups(); - this._fetchNetworkSettings(); + this._fetchDevicesAndGroups(); } } protected render(): TemplateResult { + const deviceIds = new Set(); + let entityCount = 0; + for (const entity of Object.values(this.hass.entities)) { + if (entity.platform === "zha") { + entityCount++; + if (entity.device_id) { + deviceIds.add(entity.device_id); + } + } + } const deviceOnline = - this._offlineDevices < this._totalDevices || this._totalDevices === 0; + this._offlineDevices < deviceIds.size || deviceIds.size === 0; return html`
- ${this._renderNetworkStatus(deviceOnline)} - ${this._renderMyNetworkCard()} ${this._renderNavigationCard()} - ${this._renderBackupCard()} + ${this._renderNetworkStatus(deviceOnline, deviceIds.size)} + ${this._renderMyNetworkCard(deviceIds, entityCount)} + ${this._renderNavigationCard()} ${this._renderBackupCard()}
@@ -107,7 +112,7 @@ class ZHAConfigDashboard extends LitElement { `; } - private _renderNetworkStatus(deviceOnline: boolean) { + private _renderNetworkStatus(deviceOnline: boolean, totalDevices: number) { return html` ${this._error @@ -127,11 +132,11 @@ class ZHAConfigDashboard extends LitElement { ${this.hass.localize( "ui.panel.config.zha.configuration_page.devices", - { count: this._totalDevices } + { count: totalDevices } )} - ${this._offlineDevices > 0 + ${this._asyncDataLoaded && this._offlineDevices > 0 ? html`(${this.hass.localize( "ui.panel.config.zha.configuration_page.devices_offline", { count: this._offlineDevices } @@ -145,20 +150,7 @@ class ZHAConfigDashboard extends LitElement { `; } - private _renderMyNetworkCard() { - const deviceIds = this._configEntry - ? new Set( - Object.values(this.hass.devices) - .filter((device) => - device.config_entries.includes(this._configEntry!.entry_id) - ) - .map((device) => device.id) - ) - : new Set(); - const entityCount = Object.values(this.hass.entities).filter( - (entity) => entity.device_id && deviceIds.has(entity.device_id) - ).length; - + private _renderMyNetworkCard(deviceIds: Set, entityCount: number) { return html`
@@ -205,11 +197,20 @@ class ZHAConfigDashboard extends LitElement { slot="start" .path=${mdiFolderMultipleOutline} > -
- ${this.hass.localize( - "ui.panel.config.zha.configuration_page.group_count", - { count: this._totalGroups } - )} +
+ ${this._asyncDataLoaded && this._totalGroups !== undefined + ? this.hass.localize( + "ui.panel.config.zha.configuration_page.group_count", + { count: this._totalGroups } + ) + : this.hass.localize( + "ui.panel.config.zha.groups.groups.caption" + )}
@@ -304,7 +305,6 @@ class ZHAConfigDashboard extends LitElement { slot="end" size="small" @click=${this._createAndDownloadBackup} - .disabled=${!this._networkSettings} > ${this.hass.localize( @@ -353,10 +353,6 @@ class ZHAConfigDashboard extends LitElement { this._configuration = await fetchZHAConfiguration(this.hass!); } - private async _fetchNetworkSettings(): Promise { - this._networkSettings = await fetchZHANetworkSettings(this.hass!); - } - private async _createAndDownloadBackup(): Promise { let backup_and_metadata: ZHANetworkBackupAndMetadata; @@ -400,29 +396,31 @@ class ZHAConfigDashboard extends LitElement { showOptionsFlowDialog(this, this._configEntry); } - private async _fetchGroups(): Promise { - try { - const groups = await fetchGroups(this.hass); - this._totalGroups = groups.length; - } catch (_err) { - // Groups are optional - } - } + private async _fetchDevicesAndGroups(): Promise { + const [devicesResult, groupsResult] = await Promise.allSettled([ + fetchDevices(this.hass), + fetchGroups(this.hass), + ]); - private async _fetchDevicesAndUpdateStatus(): Promise { - try { - const devices = await fetchDevices(this.hass); - this._totalDevices = devices.length; - this._offlineDevices = - this._totalDevices - devices.filter((d) => d.available).length; - } catch (err: any) { - this._error = err.message || err; + if (devicesResult.status === "fulfilled") { + this._offlineDevices = devicesResult.value.filter( + (d) => !d.available + ).length; + } else { + this._error = devicesResult.reason?.message || devicesResult.reason; } + + if (groupsResult.status === "fulfilled") { + this._totalGroups = groupsResult.value.length; + } + + this._asyncDataLoaded = true; } static get styles(): CSSResultGroup { return [ haStyle, + animationStyles, css` ha-card { margin: auto; @@ -519,6 +517,11 @@ class ZHAConfigDashboard extends LitElement { color: var(--secondary-text-color); } + .network-status small.offline, + .fade-in { + animation: fade-in var(--ha-animation-duration-slow) ease-in; + } + .container { padding: var(--ha-space-2) var(--ha-space-4) calc(var(--ha-space-20) + var(--safe-area-inset-bottom, 0px));