diff --git a/demo/src/html/index.html.template b/demo/src/html/index.html.template index 368dcc08e3..69c31bbf74 100644 --- a/demo/src/html/index.html.template +++ b/demo/src/html/index.html.template @@ -62,24 +62,10 @@ justify-content: center; align-items: center; } - #ha-launch-screen svg { - width: 170px; - flex-shrink: 0; - } - #ha-launch-screen .ha-launch-screen-spacer { - flex: 1; - } -
-
- - - - -
-
+
<%= renderTemplate("../../../src/html/_js_base.html.template") %> <%= renderTemplate("../../../src/html/_preload_roboto.html.template") %> diff --git a/src/html/index.html.template b/src/html/index.html.template index a74297f024..53af88d40a 100644 --- a/src/html/index.html.template +++ b/src/html/index.html.template @@ -62,24 +62,10 @@ justify-content: center; align-items: center; } - #ha-launch-screen svg { - width: 170px; - flex-shrink: 0; - } - #ha-launch-screen .ha-launch-screen-spacer { - flex: 1; - } -
-
- - - - -
-
+
<%= renderTemplate("_js_base.html.template") %> <%= renderTemplate("_preload_roboto.html.template") %> diff --git a/src/layouts/ha-init-page.ts b/src/layouts/ha-init-page.ts index d8e0b550ea..890044c40a 100644 --- a/src/layouts/ha-init-page.ts +++ b/src/layouts/ha-init-page.ts @@ -1,5 +1,6 @@ import { css, CSSResultGroup, html, LitElement, PropertyValues } from "lit"; import { property, state } from "lit/decorators"; +import "../components/ha-logo-svg"; class HaInitPage extends LitElement { @property({ type: Boolean }) public error = false; @@ -13,36 +14,36 @@ class HaInitPage extends LitElement { private _retryInterval?: number; protected render() { - return this.error - ? html` -

Unable to connect to Home Assistant.

-

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

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

- It is possible that you are seeing this screen because your - Home Assistant is not currently connected. You can ask it to - come online from your - Nabu Casa account page. -

- ` - : ""} - ` - : html` -
- -
-
- ${this.migration - ? "Database migration in progress, please wait this might take some time" - : "Loading data"} -
- `; + return html`${this.error + ? html` +

Unable to connect to Home Assistant.

+

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

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

+ It is possible that you are seeing this screen because your + Home Assistant is not currently connected. You can ask it to + come online from your + Nabu Casa account page. +

+ ` + : ""} + ` + : html` +
+ +
+
+ ${this.migration + ? "Database migration in progress, please wait this might take some time" + : "Loading data"} +
+ `}`; } disconnectedCallback() { @@ -63,12 +64,15 @@ class HaInitPage extends LitElement { protected firstUpdated() { this._showProgressIndicatorTimeout = window.setTimeout(() => { + this._showProgressIndicatorTimeout = undefined; import("../components/ha-circular-progress"); }, 5000); this._retryInterval = window.setInterval(() => { const remainingSeconds = this._retryInSeconds--; if (remainingSeconds <= 0) { + clearInterval(this._retryInterval); + this._retryInterval = undefined; this._retry(); } }, 1000); @@ -86,6 +90,11 @@ class HaInitPage extends LitElement { flex-direction: column; align-items: center; } + ha-logo-svg { + height: 170px; + width: 170px; + padding: 12px; + } #progress-indicator-wrapper { display: flex; align-items: center; diff --git a/src/layouts/home-assistant.ts b/src/layouts/home-assistant.ts index ba9f321c79..ef0f5e99e0 100644 --- a/src/layouts/home-assistant.ts +++ b/src/layouts/home-assistant.ts @@ -9,15 +9,11 @@ import { HassElement } from "../state/hass-element"; import QuickBarMixin from "../state/quick-bar-mixin"; import { HomeAssistant, Route } from "../types"; import { storeState } from "../util/ha-pref-storage"; -import { - renderLaunchScreenInfoBox, - removeLaunchScreen, -} from "../util/launch-screen"; +import { renderLaunchScreen, removeLaunchScreen } from "../util/launch-screen"; import { registerServiceWorker, supportsServiceWorker, } from "../util/register-service-worker"; -import "./ha-init-page"; import "./home-assistant-main"; const useHash = __DEMO__; @@ -39,8 +35,12 @@ export class HomeAssistantAppEl extends QuickBarMixin(HassElement) { private _haVersion?: string; + private _error?: boolean; + private _hiddenTimeout?: number; + private _renderInitTimeout?: number; + private _visiblePromiseResolve?: () => void; constructor() { @@ -89,6 +89,10 @@ export class HomeAssistantAppEl extends QuickBarMixin(HassElement) { ) { this.render = this.renderHass; this.update = super.update; + if (this._renderInitTimeout) { + clearTimeout(this._renderInitTimeout); + this._renderInitTimeout = undefined; + } removeLaunchScreen(); } super.update(changedProps); @@ -139,7 +143,9 @@ export class HomeAssistantAppEl extends QuickBarMixin(HassElement) { // Render launch screen info box (loading data / error message) // if Home Assistant is not loaded yet. if (this.render !== this.renderHass) { - this._renderInitInfo(false); + this._renderInitTimeout = window.setTimeout(() => { + this._renderInitInfo(); + }, 1000); } } @@ -153,7 +159,7 @@ export class HomeAssistantAppEl extends QuickBarMixin(HassElement) { } if (changedProps.has("_databaseMigration")) { if (this.render !== this.renderHass) { - this._renderInitInfo(false); + this._renderInitInfo(); } else if (this._databaseMigration) { // we already removed the launch screen, so we refresh to add it again to show the migration screen location.reload(); @@ -233,7 +239,8 @@ export class HomeAssistantAppEl extends QuickBarMixin(HassElement) { this._haVersion = conn.haVersion; this.initializeHass(auth, conn); } catch (err: any) { - this._renderInitInfo(true); + this._error = true; + this._renderInitInfo(); } } @@ -290,10 +297,15 @@ export class HomeAssistantAppEl extends QuickBarMixin(HassElement) { } } - private _renderInitInfo(error: boolean) { - renderLaunchScreenInfoBox( + private async _renderInitInfo() { + if (this._renderInitTimeout) { + clearTimeout(this._renderInitTimeout); + } + this._renderInitTimeout = undefined; + await import("./ha-init-page"); + renderLaunchScreen( html`` ); diff --git a/src/util/launch-screen.ts b/src/util/launch-screen.ts index 965732d470..910260c470 100644 --- a/src/util/launch-screen.ts +++ b/src/util/launch-screen.ts @@ -7,9 +7,9 @@ export const removeLaunchScreen = () => { } }; -export const renderLaunchScreenInfoBox = (content: TemplateResult) => { - const infoBoxElement = document.getElementById("ha-launch-screen-info-box"); - if (infoBoxElement) { - render(content, infoBoxElement); +export const renderLaunchScreen = (content: TemplateResult) => { + const launchScreen = document.getElementById("ha-launch-screen"); + if (launchScreen) { + render(content, launchScreen); } };