Handle starting the frontend before finished loading integrations

src/data/connection-status.ts

@@ -4,7 +4,11 @@
 
 import { fireEvent, HASSDomEvent } from "../common/dom/fire_event";
 
-export type ConnectionStatus = "connected" | "auth-invalid" | "disconnected";
+export type ConnectionStatus =
+  | "connected"
+  | "started"
+  | "auth-invalid"
+  | "disconnected";
 
 declare global {
   // for fire event

src/fake_data/demo_config.ts

@@ -18,6 +18,7 @@ export const demoConfig: HassConfig = {
   whitelist_external_dirs: [],
   config_source: "storage",
   safe_mode: false,
+  state: "RUNNING",
   internal_url: "http://homeassistant.local:8123",
   external_url: null,
 };

src/layouts/partial-panel-resolver.ts

@@ -84,6 +84,8 @@ class PartialPanelResolver extends HassRouterPage {
 
   @property() public narrow?: boolean;
 
+  private _waitForStart = false;
+
   protected updated(changedProps: PropertyValues) {
     super.updated(changedProps);
 
@@ -128,6 +130,27 @@ class PartialPanelResolver extends HassRouterPage {
   private async _updateRoutes(oldPanels?: HomeAssistant["panels"]) {
     this.routerOptions = getRoutes(this.hass.panels);
 
+    if (
+      !this._waitForStart &&
+      this._currentPage &&
+      !this.hass.panels[this._currentPage]
+    ) {
+      if (this.hass.config.state !== "RUNNING") {
+        this._waitForStart = true;
+        window.addEventListener("connection-status", (ev) => {
+          if (ev.detail === "started") {
+            this._waitForStart = false;
+            this.rebuild();
+          }
+        });
+        if (this.lastChild) {
+          this.removeChild(this.lastChild);
+        }
+        this.appendChild(this.createLoadingScreen());
+        return;
+      }
+    }
+
     if (
       !oldPanels ||
       !deepEqual(

src/mixins/subscribe-mixin.ts

@@ -24,7 +24,11 @@ export const SubscribeMixin = <T extends Constructor<UpdatingElement>>(
       if (this.__unsubs) {
         while (this.__unsubs.length) {
           const unsub = this.__unsubs.pop()!;
-          Promise.resolve(unsub).then((unsubFunc) => unsubFunc());
+          if (unsub instanceof Promise) {
+            unsub.then((unsubFunc) => unsubFunc());
+          } else {
+            unsub();
+          }
         }
         this.__unsubs = undefined;
       }

src/panels/lovelace/badges/hui-state-label-badge.ts

@@ -14,7 +14,6 @@ import { HomeAssistant } from "../../../types";
 import { actionHandler } from "../common/directives/action-handler-directive";
 import { handleAction } from "../common/handle-action";
 import { hasAction } from "../common/has-action";
-import "../components/hui-warning-element";
 import { LovelaceBadge } from "../types";
 import { StateLabelBadgeConfig } from "./types";
 

src/panels/lovelace/cards/hui-alarm-panel-card.ts

@@ -22,7 +22,7 @@ import {
 } from "../../../data/alarm_control_panel";
 import type { HomeAssistant } from "../../../types";
 import { findEntities } from "../common/find-entites";
-import "../components/hui-warning";
+import { createEntityNotFoundWarning } from "../components/hui-warning";
 import type { LovelaceCard } from "../types";
 import { AlarmPanelCardConfig } from "./types";
 
@@ -151,13 +151,9 @@ class HuiAlarmPanelCard extends LitElement implements LovelaceCard {
 
     if (!stateObj) {
       return html`
-        <hui-warning
-          >${this.hass.localize(
-            "ui.panel.lovelace.warning.entity_not_found",
-            "entity",
-            this._config.entity
-          )}</hui-warning
-        >
+        <hui-warning>
+          ${createEntityNotFoundWarning(this.hass, this._config.entity)}
+        </hui-warning>
       `;
     }
 

src/panels/lovelace/cards/hui-button-card.ts

@@ -33,7 +33,7 @@ import { actionHandler } from "../common/directives/action-handler-directive";
 import { findEntities } from "../common/find-entites";
 import { handleAction } from "../common/handle-action";
 import { hasAction } from "../common/has-action";
-import "../components/hui-warning";
+import { createEntityNotFoundWarning } from "../components/hui-warning";
 import { LovelaceCard, LovelaceCardEditor } from "../types";
 import { ButtonCardConfig } from "./types";
 
@@ -145,13 +145,9 @@ export class HuiButtonCard extends LitElement implements LovelaceCard {
 
     if (this._config.entity && !stateObj) {
       return html`
-        <hui-warning
-          >${this.hass.localize(
-            "ui.panel.lovelace.warning.entity_not_found",
-            "entity",
-            this._config.entity
-          )}</hui-warning
-        >
+        <hui-warning>
+          ${createEntityNotFoundWarning(this.hass, this._config.entity)}
+        </hui-warning>
       `;
     }
 

src/panels/lovelace/cards/hui-entity-card.ts

@@ -20,7 +20,7 @@ import { UNAVAILABLE_STATES } from "../../../data/entity";
 import { HomeAssistant } from "../../../types";
 import { findEntities } from "../common/find-entites";
 import { hasConfigOrEntityChanged } from "../common/has-changed";
-import "../components/hui-warning";
+import { createEntityNotFoundWarning } from "../components/hui-warning";
 import { createHeaderFooterElement } from "../create-element/create-header-footer-element";
 import {
   LovelaceCard,
@@ -92,13 +92,9 @@ export class HuiEntityCard extends LitElement implements LovelaceCard {
 
     if (!stateObj) {
       return html`
-        <hui-warning
-          >${this.hass.localize(
-            "ui.panel.lovelace.warning.entity_not_found",
-            "entity",
-            this._config.entity
-          )}</hui-warning
-        >
+        <hui-warning>
+          ${createEntityNotFoundWarning(this.hass, this._config.entity)}
+        </hui-warning>
       `;
     }
 

src/panels/lovelace/cards/hui-gauge-card.ts

@@ -20,7 +20,7 @@ import "../../../components/ha-card";
 import type { HomeAssistant } from "../../../types";
 import { findEntities } from "../common/find-entites";
 import { hasConfigOrEntityChanged } from "../common/has-changed";
-import "../components/hui-warning";
+import { createEntityNotFoundWarning } from "../components/hui-warning";
 import type { LovelaceCard, LovelaceCardEditor } from "../types";
 import type { GaugeCardConfig } from "./types";
 import { debounce } from "../../../common/util/debounce";
@@ -105,13 +105,9 @@ class HuiGaugeCard extends LitElement implements LovelaceCard {
 
     if (!stateObj) {
       return html`
-        <hui-warning
-          >${this.hass.localize(
-            "ui.panel.lovelace.warning.entity_not_found",
-            "entity",
-            this._config.entity
-          )}</hui-warning
-        >
+        <hui-warning>
+          ${createEntityNotFoundWarning(this.hass, this._config.entity)}
+        </hui-warning>
       `;
     }
 

src/panels/lovelace/cards/hui-glance-card.ts

@@ -30,6 +30,7 @@ import "../components/hui-warning-element";
 import { LovelaceCard, LovelaceCardEditor } from "../types";
 import "../components/hui-timestamp-display";
 import { GlanceCardConfig, GlanceConfigEntity } from "./types";
+import { createEntityNotFoundWarning } from "../components/hui-warning";
 
 @customElement("hui-glance-card")
 export class HuiGlanceCard extends LitElement implements LovelaceCard {
@@ -212,11 +213,7 @@ export class HuiGlanceCard extends LitElement implements LovelaceCard {
     if (!stateObj) {
       return html`
         <hui-warning-element
-          label=${this.hass!.localize(
-            "ui.panel.lovelace.warning.entity_not_found",
-            "entity",
-            entityConf.entity
-          )}
+          .label=${createEntityNotFoundWarning(this.hass!, entityConf.entity)}
         ></hui-warning-element>
       `;
     }

src/panels/lovelace/cards/hui-light-card.ts

@@ -28,7 +28,7 @@ import { findEntities } from "../common/find-entites";
 import { handleAction } from "../common/handle-action";
 import { hasAction } from "../common/has-action";
 import { hasConfigOrEntityChanged } from "../common/has-changed";
-import "../components/hui-warning";
+import { createEntityNotFoundWarning } from "../components/hui-warning";
 import { LovelaceCard, LovelaceCardEditor } from "../types";
 import { LightCardConfig } from "./types";
 
@@ -89,13 +89,9 @@ export class HuiLightCard extends LitElement implements LovelaceCard {
 
     if (!stateObj) {
       return html`
-        <hui-warning
-          >${this.hass.localize(
-            "ui.panel.lovelace.warning.entity_not_found",
-            "entity",
-            this._config.entity
-          )}</hui-warning
-        >
+        <hui-warning>
+          ${createEntityNotFoundWarning(this.hass, this._config.entity)}
+        </hui-warning>
       `;
     }
 

src/panels/lovelace/cards/hui-media-control-card.ts

@@ -44,7 +44,7 @@ import { findEntities } from "../common/find-entites";
 import { hasConfigOrEntityChanged } from "../common/has-changed";
 import "../components/hui-marquee";
 import type { LovelaceCard, LovelaceCardEditor } from "../types";
-import "../components/hui-warning";
+import { createEntityNotFoundWarning } from "../components/hui-warning";
 import { MediaControlCardConfig } from "./types";
 import { installResizeObserver } from "../common/install-resize-observer";
 
@@ -266,13 +266,9 @@ export class HuiMediaControlCard extends LitElement implements LovelaceCard {
 
     if (!stateObj) {
       return html`
-        <hui-warning
-          >${this.hass.localize(
-            "ui.panel.lovelace.warning.entity_not_found",
-            "entity",
-            this._config.entity
-          )}</hui-warning
-        >
+        <hui-warning>
+          ${createEntityNotFoundWarning(this.hass, this._config.entity)}
+        </hui-warning>
       `;
     }
 

src/panels/lovelace/cards/hui-picture-entity-card.ts

@@ -24,7 +24,7 @@ import { handleAction } from "../common/handle-action";
 import { hasAction } from "../common/has-action";
 import { hasConfigOrEntityChanged } from "../common/has-changed";
 import "../components/hui-image";
-import "../components/hui-warning";
+import { createEntityNotFoundWarning } from "../components/hui-warning";
 import { LovelaceCard, LovelaceCardEditor } from "../types";
 import { PictureEntityCardConfig } from "./types";
 
@@ -116,13 +116,9 @@ class HuiPictureEntityCard extends LitElement implements LovelaceCard {
 
     if (!stateObj) {
       return html`
-        <hui-warning
-          >${this.hass.localize(
-            "ui.panel.lovelace.warning.entity_not_found",
-            "entity",
-            this._config.entity
-          )}</hui-warning
-        >
+        <hui-warning>
+          ${createEntityNotFoundWarning(this.hass, this._config.entity)}
+        </hui-warning>
       `;
     }
 

src/panels/lovelace/cards/hui-picture-glance-card.ts

@@ -30,6 +30,7 @@ import "../components/hui-image";
 import "../components/hui-warning-element";
 import { LovelaceCard, LovelaceCardEditor } from "../types";
 import { PictureGlanceCardConfig, PictureGlanceEntityConfig } from "./types";
+import { createEntityNotFoundWarning } from "../components/hui-warning";
 
 const STATES_OFF = new Set(["closed", "locked", "not_home", "off"]);
 
@@ -229,11 +230,7 @@ class HuiPictureGlanceCard extends LitElement implements LovelaceCard {
     if (!stateObj) {
       return html`
         <hui-warning-element
-          label=${this.hass!.localize(
-            "ui.panel.lovelace.warning.entity_not_found",
-            "entity",
-            entityConf.entity
-          )}
+          .label=${createEntityNotFoundWarning(this.hass!, entityConf.entity)}
         ></hui-warning-element>
       `;
     }

src/panels/lovelace/cards/hui-plant-status-card.ts

@@ -20,6 +20,7 @@ import { findEntities } from "../common/find-entites";
 import { hasConfigOrEntityChanged } from "../common/has-changed";
 import { LovelaceCard, LovelaceCardEditor } from "../types";
 import { PlantAttributeTarget, PlantStatusCardConfig } from "./types";
+import { createEntityNotFoundWarning } from "../components/hui-warning";
 
 const SENSORS = {
   moisture: "hass:water",
@@ -105,13 +106,9 @@ class HuiPlantStatusCard extends LitElement implements LovelaceCard {
 
     if (!stateObj) {
       return html`
-        <hui-warning
-          >${this.hass.localize(
-            "ui.panel.lovelace.warning.entity_not_found",
-            "entity",
-            this._config.entity
-          )}</hui-warning
-        >
+        <hui-warning>
+          ${createEntityNotFoundWarning(this.hass, this._config.entity)}
+        </hui-warning>
       `;
     }
 

src/panels/lovelace/cards/hui-starting-card.ts

@@ -0,0 +1,67 @@
+import "@material/mwc-button/mwc-button";
+import {
+  css,
+  CSSResult,
+  customElement,
+  html,
+  LitElement,
+  property,
+  TemplateResult,
+} from "lit-element";
+import "../../../components/ha-card";
+import { HomeAssistant } from "../../../types";
+import { LovelaceCard } from "../types";
+import { LovelaceCardConfig } from "../../../data/lovelace";
+import "@polymer/paper-spinner/paper-spinner-lite";
+
+@customElement("hui-starting-card")
+export class HuiStartingCard extends LitElement implements LovelaceCard {
+  @property() public hass?: HomeAssistant;
+
+  public getCardSize(): number {
+    return 2;
+  }
+
+  public setConfig(_config: LovelaceCardConfig): void {
+    // eslint-disable-next-line
+  }
+
+  protected render(): TemplateResult {
+    if (!this.hass) {
+      return html``;
+    }
+
+    return html`
+      <ha-card
+        .header="${this.hass.localize(
+          "ui.panel.lovelace.cards.starting.header"
+        )}"
+      >
+        <div class="card-content">
+          ${this.hass.localize("ui.panel.lovelace.cards.starting.description")}
+        </div>
+        <paper-spinner-lite active></paper-spinner-lite>
+      </ha-card>
+    `;
+  }
+
+  static get styles(): CSSResult {
+    return css`
+      .content {
+        margin-top: -1em;
+        padding: 16px;
+      }
+      paper-spinner-lite {
+        display: block;
+        margin: auto;
+        padding: 20px;
+      }
+    `;
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "hui-starting-card": HuiStartingCard;
+  }
+}