Delay display of init page

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
+    return html`<ha-logo-svg></ha-logo-svg>${this.error
-      ? html`
+        ? html`
-          <p>Unable to connect to Home Assistant.</p>
+            <p>Unable to connect to Home Assistant.</p>
-          <p class="retry-text">
+            <p class="retry-text">
-            Retrying in ${this._retryInSeconds} seconds...
+              Retrying in ${this._retryInSeconds} seconds...
-          </p>
+            </p>
-          <mwc-button @click=${this._retry}>Retry now</mwc-button>
+            <mwc-button @click=${this._retry}>Retry now</mwc-button>
-          ${location.host.includes("ui.nabu.casa")
+            ${location.host.includes("ui.nabu.casa")
-            ? html`
+              ? html`
-                <p>
+                  <p>
-                  It is possible that you are seeing this screen because your
+                    It is possible that you are seeing this screen because your
-                  Home Assistant is not currently connected. You can ask it to
+                    Home Assistant is not currently connected. You can ask it to
-                  come online from your
+                    come online from your
-                  <a href="https://account.nabucasa.com/"
+                    <a href="https://account.nabucasa.com/"
-                    >Nabu Casa account page</a
+                      >Nabu Casa account page</a
-                  >.
+                    >.
-                </p>
+                  </p>
-              `
+                `
-            : ""}
+              : ""}
-        `
+          `
-      : html`
+        : html`
-          <div id="progress-indicator-wrapper">
+            <div id="progress-indicator-wrapper">
-            <ha-circular-progress active></ha-circular-progress>
+              <ha-circular-progress active></ha-circular-progress>
-          </div>
+            </div>
-          <div id="loading-text">
+            <div id="loading-text">
-            ${this.migration
+              ${this.migration
-              ? "Database migration in progress, please wait this might take some time"
+                ? "Database migration in progress, please wait this might take some time"
-              : "Loading data"}
+                : "Loading data"}
-          </div>
+            </div>
-        `;
+          `}`;
   }
 
   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;

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 {
+import { renderLaunchScreen, removeLaunchScreen } from "../util/launch-screen";
-  renderLaunchScreenInfoBox,
-  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) {
+  private async _renderInitInfo() {
-    renderLaunchScreenInfoBox(
+    if (this._renderInitTimeout) {
+      clearTimeout(this._renderInitTimeout);
+    }
+    this._renderInitTimeout = undefined;
+    await import("./ha-init-page");
+    renderLaunchScreen(
       html`<ha-init-page
-        .error=${error}
+        .error=${this._error}
         .migration=${this._databaseMigration}
       ></ha-init-page>`
     );

src/util/launch-screen.ts

@@ -7,9 +7,9 @@ export const removeLaunchScreen = () => {
   }
 };
 
-export const renderLaunchScreenInfoBox = (content: TemplateResult) => {
+export const renderLaunchScreen = (content: TemplateResult) => {
-  const infoBoxElement = document.getElementById("ha-launch-screen-info-box");
+  const launchScreen = document.getElementById("ha-launch-screen");
-  if (infoBoxElement) {
+  if (launchScreen) {
-    render(content, infoBoxElement);
+    render(content, launchScreen);
   }
 };