Preload LL (#3273)

* Preload LL

* Remove using observer

src/data/lovelace.ts

@@ -61,10 +61,10 @@ export type ActionConfig =
   | NoActionConfig;
 
 export const fetchConfig = (
-  hass: HomeAssistant,
+  conn: Connection,
   force: boolean
 ): Promise<LovelaceConfig> =>
-  hass.callWS({
+  conn.sendMessagePromise({
     type: "lovelace/config",
     force,
   });
@@ -82,3 +82,7 @@ export const subscribeLovelaceUpdates = (
   conn: Connection,
   onChange: () => void
 ) => conn.subscribeEvents(onChange, "lovelace_updated");
+
+export interface WindowWithLovelaceProm extends Window {
+  llConfProm?: Promise<LovelaceConfig>;
+}

src/entrypoints/core.ts

@@ -15,6 +15,7 @@ import { subscribeThemes } from "../data/ws-themes";
 import { subscribeUser } from "../data/ws-user";
 import { HomeAssistant } from "../types";
 import { hassUrl } from "../data/auth";
+import { fetchConfig, WindowWithLovelaceProm } from "../data/lovelace";
 
 declare global {
   interface Window {
@@ -61,6 +62,9 @@ const connProm = async (auth) => {
   }
 };
 
+if (__DEV__) {
+  performance.mark("hass-start");
+}
 window.hassConnection = authProm().then(connProm);
 
 // Start fetching some of the data that we will need.
@@ -74,6 +78,10 @@ window.hassConnection.then(({ conn }) => {
   subscribePanels(conn, noop);
   subscribeThemes(conn, noop);
   subscribeUser(conn, noop);
+
+  if (location.pathname === "/" || location.pathname.startsWith("/lovelace/")) {
+    (window as WindowWithLovelaceProm).llConfProm = fetchConfig(conn, false);
+  }
 });
 
 window.addEventListener("error", (e) => {

src/panels/config/cloud/alexa/cloud-alexa.ts

@@ -9,7 +9,6 @@ import {
 } from "lit-element";
 import "@polymer/paper-toggle-button";
 import "@polymer/paper-icon-button";
-import { observer } from "@material/mwc-base/observer";
 import "../../../../layouts/hass-subpage";
 import "../../../../layouts/hass-loading-screen";
 import "../../../../components/ha-card";
@@ -48,9 +47,6 @@ class CloudAlexa extends LitElement {
   @property() public hass!: HomeAssistant;
 
   @property()
-  @observer(function(this: CloudAlexa, value) {
-    this._entityConfigs = value.prefs.alexa_entity_configs;
-  })
   public cloudStatus!: CloudStatusLoggedIn;
 
   @property({ type: Boolean }) public narrow!: boolean;
@@ -206,6 +202,13 @@ class CloudAlexa extends LitElement {
     this._fetchData();
   }
 
+  protected updated(changedProps) {
+    super.updated(changedProps);
+    if (changedProps.has("cloudStatus")) {
+      this._entityConfigs = this.cloudStatus.prefs.alexa_entity_configs;
+    }
+  }
+
   private async _fetchData() {
     const entities = await fetchCloudAlexaEntities(this.hass);
     entities.sort((a, b) => {

src/panels/lovelace/ha-panel-lovelace.ts

@@ -5,6 +5,7 @@ import {
   LovelaceConfig,
   saveConfig,
   subscribeLovelaceUpdates,
+  WindowWithLovelaceProm,
 } from "../../data/lovelace";
 import "../../layouts/hass-loading-screen";
 import "../../layouts/hass-error-screen";
@@ -200,9 +201,19 @@ class LovelacePanel extends LitElement {
   private async _fetchConfig(forceDiskRefresh) {
     let conf: LovelaceConfig;
     let confMode: Lovelace["mode"] = this.panel!.config.mode;
+    let confProm: Promise<LovelaceConfig>;
+    const llWindow = window as WindowWithLovelaceProm;
+
+    // On first load, we speed up loading page by having LL promise ready
+    if (llWindow.llConfProm) {
+      confProm = llWindow.llConfProm;
+      llWindow.llConfProm = undefined;
+    } else {
+      confProm = fetchConfig(this.hass!.connection, forceDiskRefresh);
+    }
 
     try {
-      conf = await fetchConfig(this.hass!, forceDiskRefresh);
+      conf = await confProm;
     } catch (err) {
       if (err.code !== "config_not_found") {
         // tslint:disable-next-line