diff --git a/src/layouts/ha-init-page.ts b/src/layouts/ha-init-page.ts index 305bc18c84..42df3b8d69 100644 --- a/src/layouts/ha-init-page.ts +++ b/src/layouts/ha-init-page.ts @@ -5,15 +5,22 @@ import { property, state } from "lit/decorators"; class HaInitPage extends LitElement { @property({ type: Boolean }) public error = false; - @state() showProgressIndicator = false; + @state() private _showProgressIndicator = false; - private _showProgressIndicatorTimeout; + @state() private _retryInSeconds = 60; + + private _showProgressIndicatorTimeout?: NodeJS.Timeout; + + private _retryInterval?: NodeJS.Timeout; protected render() { return this.error ? html`

Unable to connect to Home Assistant.

- Retry +

+ Retrying in ${this._retryInSeconds} seconds... +

+ Retry now ${location.host.includes("ui.nabu.casa") ? html`

@@ -29,7 +36,7 @@ class HaInitPage extends LitElement { ` : html`

- ${this.showProgressIndicator + ${this._showProgressIndicator ? html`` : ""}
@@ -39,14 +46,26 @@ class HaInitPage extends LitElement { disconnectedCallback() { super.disconnectedCallback(); - clearTimeout(this._showProgressIndicatorTimeout); + if (this._showProgressIndicatorTimeout) { + clearTimeout(this._showProgressIndicatorTimeout); + } + if (this._retryInterval) { + clearInterval(this._retryInterval); + } } protected firstUpdated() { this._showProgressIndicatorTimeout = setTimeout(async () => { await import("../components/ha-circular-progress"); - this.showProgressIndicator = true; + this._showProgressIndicator = true; }, 5000); + + this._retryInterval = setInterval(() => { + const remainingSeconds = this._retryInSeconds--; + if (remainingSeconds <= 0) { + this._retry(); + } + }, 1000); } private _retry() { @@ -70,6 +89,9 @@ class HaInitPage extends LitElement { a { color: var(--primary-color); } + .retry-text { + margin-top: 0; + } p, #loading-text { max-width: 350px;