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;