diff --git a/demo/src/html/index.html.template b/demo/src/html/index.html.template index 05cabfe6e6..85e5388388 100644 --- a/demo/src/html/index.html.template +++ b/demo/src/html/index.html.template @@ -63,6 +63,16 @@ /> Home Assistant Demo -
+
+
+ + + + + + + + + + + + + + + + +
+
+ + <%= renderTemplate('_js_base') %> <%= renderTemplate('_preload_roboto') %> diff --git a/src/html/index.html.template b/src/html/index.html.template index f758aa5e33..d5ba727af1 100644 --- a/src/html/index.html.template +++ b/src/html/index.html.template @@ -39,29 +39,64 @@ -
- +
+
+ + + + + + + + + + + + + + + + +
+
+ + <%= renderTemplate('_js_base') %> <%= renderTemplate('_preload_roboto') %> diff --git a/src/layouts/ha-init-page.ts b/src/layouts/ha-init-page.ts index 0a4e730fde..fcd7e66f14 100644 --- a/src/layouts/ha-init-page.ts +++ b/src/layouts/ha-init-page.ts @@ -1,43 +1,52 @@ import "@material/mwc-button"; import { css, CSSResultGroup, html, LitElement } from "lit"; -import { property } from "lit/decorators"; -import "../components/ha-circular-progress"; -import { removeInitSkeleton } from "../util/init-skeleton"; +import { property, state } from "lit/decorators"; class HaInitPage extends LitElement { @property({ type: Boolean }) public error = false; + @state() showProgressIndicator = false; + + private _showProgressIndicatorTimeout; + protected render() { - return html` -
- - ${this.error - ? html` -

Unable to connect to Home Assistant.

- Retry - ${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 - Naba Casa account page. -

- ` - : ""} - ` - : html` - -

Loading data

- `} -
- `; + return this.error + ? html` +

Unable to connect to Home Assistant.

+ Retry + ${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 + Naba Casa account page. +

+ ` + : ""} + ` + : html` +
+ ${this.showProgressIndicator + ? html`` + : ""} +
+
Loading data
+ `; + } + + disconnectedCallback() { + super.disconnectedCallback(); + clearTimeout(this._showProgressIndicatorTimeout); } protected firstUpdated() { - removeInitSkeleton(); + this._showProgressIndicatorTimeout = setTimeout(async () => { + await import("../components/ha-circular-progress"); + this.showProgressIndicator = true; + }, 5000); } private _retry() { @@ -46,20 +55,23 @@ class HaInitPage extends LitElement { static get styles(): CSSResultGroup { return css` - div { - height: 100%; + :host { + flex: 0; display: flex; flex-direction: column; - justify-content: center; align-items: center; } - ha-circular-progress { - margin-top: 9px; + #progress-indicator-wrapper { + display: flex; + align-items: center; + margin: 25px 0; + height: 50px; } a { color: var(--primary-color); } - p { + p, + #loading-text { max-width: 350px; color: var(--primary-text-color); } @@ -68,3 +80,9 @@ class HaInitPage extends LitElement { } customElements.define("ha-init-page", HaInitPage); + +declare global { + interface HTMLElementTagNameMap { + "ha-init-page": HaInitPage; + } +} diff --git a/src/layouts/home-assistant.ts b/src/layouts/home-assistant.ts index 4c31f66f72..bb452d1781 100644 --- a/src/layouts/home-assistant.ts +++ b/src/layouts/home-assistant.ts @@ -8,6 +8,10 @@ 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 { registerServiceWorker, supportsServiceWorker, @@ -40,6 +44,8 @@ export class HomeAssistantAppEl extends QuickBarMixin(HassElement) { private _visiblePromiseResolve?: () => void; + private _visibleLaunchScreen = true; + constructor() { super(); const path = curPath(); @@ -55,16 +61,26 @@ export class HomeAssistantAppEl extends QuickBarMixin(HassElement) { } protected render() { - const hass = this.hass; + if (this._isHassComplete() && this.hass) { + return html` + + `; + } - return hass && hass.states && hass.config && hass.services - ? html` - - ` - : html``; + return ""; + } + + update(changedProps) { + super.update(changedProps); + + // Remove launch screen if main gui is loaded + if (this._isHassComplete() && this._visibleLaunchScreen) { + this._visibleLaunchScreen = false; + removeLaunchScreen(); + } } protected firstUpdated(changedProps) { @@ -109,6 +125,13 @@ export class HomeAssistantAppEl extends QuickBarMixin(HassElement) { navigate(href); } }); + + // Render launch screen info box (loading data / error message) + if (!this._isHassComplete() && this._visibleLaunchScreen) { + renderLaunchScreenInfoBox( + html`` + ); + } } protected updated(changedProps: PropertyValues): void { @@ -229,6 +252,14 @@ export class HomeAssistantAppEl extends QuickBarMixin(HassElement) { this._visiblePromiseResolve = undefined; } } + + private _isHassComplete(): boolean { + if (this.hass?.states && this.hass.config && this.hass.services) { + return true; + } + + return false; + } } declare global { diff --git a/src/layouts/partial-panel-resolver.ts b/src/layouts/partial-panel-resolver.ts index b3d1a72b6a..48b44a0b28 100644 --- a/src/layouts/partial-panel-resolver.ts +++ b/src/layouts/partial-panel-resolver.ts @@ -11,7 +11,7 @@ import { deepEqual } from "../common/util/deep-equal"; import { getDefaultPanel } from "../data/panel"; import { CustomPanelInfo } from "../data/panel_custom"; import { HomeAssistant, Panels } from "../types"; -import { removeInitSkeleton } from "../util/init-skeleton"; +import { removeLaunchScreen } from "../util/launch-screen"; import { HassRouterPage, RouteOptions, @@ -226,7 +226,7 @@ class PartialPanelResolver extends HassRouterPage { ) { await this.rebuild(); await this.pageRendered; - removeInitSkeleton(); + removeLaunchScreen(); } } } diff --git a/src/util/init-skeleton.ts b/src/util/init-skeleton.ts deleted file mode 100644 index f5912e70a0..0000000000 --- a/src/util/init-skeleton.ts +++ /dev/null @@ -1,6 +0,0 @@ -export const removeInitSkeleton = () => { - const initEl = document.getElementById("ha-init-skeleton"); - if (initEl) { - initEl.parentElement!.removeChild(initEl); - } -}; diff --git a/src/util/launch-screen.ts b/src/util/launch-screen.ts new file mode 100644 index 0000000000..eb873a65db --- /dev/null +++ b/src/util/launch-screen.ts @@ -0,0 +1,15 @@ +import { render, TemplateResult } from "lit"; + +export const removeLaunchScreen = () => { + const launchScreenElement = document.getElementById("ha-launch-screen"); + if (launchScreenElement) { + launchScreenElement.parentElement!.removeChild(launchScreenElement); + } +}; + +export const renderLaunchScreenInfoBox = (element: TemplateResult) => { + const infoBoxElement = document.getElementById("ha-launch-screen-info-box"); + if (infoBoxElement) { + render(element, infoBoxElement); + } +};