diff --git a/src/panels/config/devices/ha-config-device-page.ts b/src/panels/config/devices/ha-config-device-page.ts index e396c7072b..44530ab333 100644 --- a/src/panels/config/devices/ha-config-device-page.ts +++ b/src/panels/config/devices/ha-config-device-page.ts @@ -127,16 +127,15 @@ export class HaConfigDevicePage extends LitElement { @state() private _related?: RelatedResult; - // If a number, it's the request ID so we make sure we don't show older info - @state() private _diagnosticDownloadLinks?: number | DeviceAction[]; + @state() private _diagnosticDownloadLinks: DeviceAction[] = []; - @state() private _deleteButtons?: DeviceAction[]; + @state() private _deleteButtons: DeviceAction[] = []; - @state() private _deviceActions?: DeviceAction[]; + @state() private _deviceActions: DeviceAction[] = []; - @state() private _deviceAlerts?: DeviceAlert[]; + @state() private _deviceAlerts: DeviceAlert[] = []; - private _deviceAlertsTimeout?: number; + private _deviceAlertsActionsTimeout?: number; @state() @consume({ context: fullEntitiesContext, subscribe: true }) @@ -255,42 +254,19 @@ export class HaConfigDevicePage extends LitElement { public willUpdate(changedProps) { super.willUpdate(changedProps); - if ( - changedProps.has("deviceId") || - changedProps.has("devices") || - changedProps.has("entries") - ) { - this._diagnosticDownloadLinks = undefined; - this._deleteButtons = undefined; - this._deviceActions = undefined; - this._deviceAlerts = undefined; + if (changedProps.has("deviceId") || changedProps.has("entries")) { + this._deviceActions = []; + this._deviceAlerts = []; + this._deleteButtons = []; + this._diagnosticDownloadLinks = []; + this._fetchData(); } - - if ( - (this._diagnosticDownloadLinks && - this._deleteButtons && - this._deviceActions && - this._deviceAlerts) || - !this.deviceId || - !this.entries - ) { - return; - } - - this._diagnosticDownloadLinks = Math.random(); - this._deleteButtons = []; // To prevent re-rendering if no delete buttons - this._deviceActions = []; - this._deviceAlerts = []; - this._getDiagnosticButtons(this._diagnosticDownloadLinks); - this._getDeleteActions(); - this._getDeviceActions(); - clearTimeout(this._deviceAlertsTimeout); - this._getDeviceAlerts(); } protected firstUpdated(changedProps) { super.firstUpdated(changedProps); loadDeviceRegistryDetailDialog(); + this._fetchData(); } protected updated(changedProps) { @@ -302,7 +278,7 @@ export class HaConfigDevicePage extends LitElement { public disconnectedCallback() { super.disconnectedCallback(); - clearTimeout(this._deviceAlertsTimeout); + clearTimeout(this._deviceAlertsActionsTimeout); } protected render() { @@ -909,7 +885,18 @@ export class HaConfigDevicePage extends LitElement { `; } - private async _getDiagnosticButtons(requestId: number): Promise { + private _fetchData() { + if (this.deviceId && this.entries.length) { + this._getDiagnosticButtons(); + this._getDeleteActions(); + clearTimeout(this._deviceAlertsActionsTimeout); + this._getDeviceActions(); + this._getDeviceAlerts(); + } + } + + private async _getDiagnosticButtons(): Promise { + const deviceId = this.deviceId; if (!isComponentLoaded(this.hass, "diagnostics")) { return; } @@ -951,7 +938,8 @@ export class HaConfigDevicePage extends LitElement { links = links.filter(Boolean); - if (this._diagnosticDownloadLinks !== requestId) { + if (this.deviceId !== deviceId) { + // abort if the device has changed return; } if (links.length > 0) { @@ -1176,12 +1164,12 @@ export class HaConfigDevicePage extends LitElement { deviceAlerts.push(...alerts); } + this._deviceAlerts = deviceAlerts; if (deviceAlerts.length) { - this._deviceAlerts = deviceAlerts; - this._deviceAlertsTimeout = window.setTimeout( - () => this._getDeviceAlerts(), - DEVICE_ALERTS_INTERVAL - ); + this._deviceAlertsActionsTimeout = window.setTimeout(() => { + this._getDeviceAlerts(); + this._getDeviceActions(); + }, DEVICE_ALERTS_INTERVAL); } }