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,7 +14,7 @@ class HaInitPage extends LitElement {
   private _retryInterval?: number;
 
   protected render() {
-    return this.error
+    return html`<ha-logo-svg></ha-logo-svg>${this.error
         ? html`
             <p>Unable to connect to Home Assistant.</p>
             <p class="retry-text">
@@ -42,7 +43,7 @@ class HaInitPage extends LitElement {
                 ? "Database migration in progress, please wait this might take some time"
                 : "Loading data"}
             </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);
   }
 };