Optimize app entrypoint (#16048)

* Optimize app entrypoint

* review

* remove legacy support

src/components/ha-drawer.ts

@@ -1,9 +1,3 @@
-import {
-  DIRECTION_LEFT,
-  DIRECTION_RIGHT,
-  Manager,
-  Swipe,
-} from "@egjs/hammerjs";
 import { DrawerBase } from "@material/mwc-drawer/mwc-drawer-base";
 import { styles } from "@material/mwc-drawer/mwc-drawer.css";
 import { css, PropertyValues } from "lit";
@@ -40,24 +34,31 @@ export class HaDrawer extends DrawerBase {
       this.mdcRoot.dir = this.direction;
     }
     if (changedProps.has("open") && this.open && this.type === "modal") {
-      this._mc = new Manager(document, {
-        touchAction: "pan-y",
-      });
-      this._mc.add(
-        new Swipe({
-          direction:
-            this.direction === "rtl" ? DIRECTION_RIGHT : DIRECTION_LEFT,
-        })
-      );
-      this._mc.on("swipeleft swiperight", () => {
-        fireEvent(this, "hass-toggle-menu", { open: false });
-      });
+      this._setupSwipe();
     } else if (this._mc) {
       this._mc.destroy();
       this._mc = undefined;
     }
   }
 
+  private async _setupSwipe() {
+    const hammer = await import("../resources/hammer");
+    this._mc = new hammer.Manager(document, {
+      touchAction: "pan-y",
+    });
+    this._mc.add(
+      new hammer.Swipe({
+        direction:
+          this.direction === "rtl"
+            ? hammer.DIRECTION_RIGHT
+            : hammer.DIRECTION_LEFT,
+      })
+    );
+    this._mc.on("swipeleft swiperight", () => {
+      fireEvent(this, "hass-toggle-menu", { open: false });
+    });
+  }
+
   static override styles = [
     styles,
     css`

src/entrypoints/app.ts

@@ -6,7 +6,6 @@ import "@webcomponents/scoped-custom-element-registry/scoped-custom-element-regi
 import "../layouts/home-assistant";
 import "../resources/ha-style";
 import "../resources/roboto";
-import "../util/legacy-support";
 
 setPassiveTouchGestures(true);
 setCancelSyntheticClickEvents(false);

src/layouts/ha-init-page.ts

@@ -1,12 +1,9 @@
-import "@material/mwc-button";
-import { css, CSSResultGroup, html, LitElement } from "lit";
+import { css, CSSResultGroup, html, LitElement, PropertyValues } from "lit";
 import { property, state } from "lit/decorators";
 
 class HaInitPage extends LitElement {
   @property({ type: Boolean }) public error = false;
 
-  @state() private _showProgressIndicator = false;
-
   @state() private _retryInSeconds = 60;
 
   private _showProgressIndicatorTimeout?: NodeJS.Timeout;
@@ -36,9 +33,7 @@ class HaInitPage extends LitElement {
         `
       : html`
           <div id="progress-indicator-wrapper">
-            ${this._showProgressIndicator
-              ? html`<ha-circular-progress active></ha-circular-progress>`
-              : ""}
+            <ha-circular-progress active></ha-circular-progress>
           </div>
           <div id="loading-text">Loading data</div>
         `;
@@ -54,10 +49,15 @@ class HaInitPage extends LitElement {
     }
   }
 
+  protected willUpdate(changedProperties: PropertyValues<this>) {
+    if (changedProperties.has("error") && this.error) {
+      import("@material/mwc-button");
+    }
+  }
+
   protected firstUpdated() {
-    this._showProgressIndicatorTimeout = setTimeout(async () => {
-      await import("../components/ha-circular-progress");
-      this._showProgressIndicator = true;
+    this._showProgressIndicatorTimeout = setTimeout(() => {
+      import("../components/ha-circular-progress");
     }, 5000);
 
     this._retryInterval = setInterval(() => {

src/layouts/hass-router-page.ts

@@ -3,8 +3,6 @@ import { property } from "lit/decorators";
 import memoizeOne from "memoize-one";
 import { navigate } from "../common/navigate";
 import { Route } from "../types";
-import "./hass-error-screen";
-import "./hass-loading-screen";
 
 const extractPage = (path: string, defaultPage: string) => {
   if (path === "") {
@@ -256,10 +254,12 @@ export class HassRouterPage extends ReactiveElement {
   }
 
   protected createLoadingScreen() {
+    import("./hass-loading-screen");
     return document.createElement("hass-loading-screen");
   }
 
   protected createErrorScreen(error: string) {
+    import("./hass-error-screen");
     const errorEl = document.createElement("hass-error-screen");
     errorEl.error = error;
     return errorEl;

src/layouts/home-assistant.ts

@@ -65,7 +65,7 @@ export class HomeAssistantAppEl extends QuickBarMixin(HassElement) {
     `;
   }
 
-  update(changedProps) {
+  update(changedProps: PropertyValues<this>) {
     if (this.hass?.states && this.hass.config && this.hass.services) {
       this.render = this.renderHass;
       this.update = super.update;
@@ -74,7 +74,7 @@ export class HomeAssistantAppEl extends QuickBarMixin(HassElement) {
     super.update(changedProps);
   }
 
-  protected firstUpdated(changedProps) {
+  protected firstUpdated(changedProps: PropertyValues<this>) {
     super.firstUpdated(changedProps);
     this._initializeHass();
     setTimeout(() => registerServiceWorker(this), 1000);

src/resources/hammer.ts

@@ -0,0 +1,6 @@
+export {
+  DIRECTION_LEFT,
+  DIRECTION_RIGHT,
+  Manager,
+  Swipe,
+} from "@egjs/hammerjs";

src/util/legacy-support.js

@@ -1,39 +0,0 @@
-/**
- * Provide legacy support to HTML imports by exposing Polymer and
- * Polymer.Element on the window object.
- */
-/* eslint-plugin-disable lit */
-import { html } from "@polymer/polymer/lib/utils/html-tag";
-import { PolymerElement } from "@polymer/polymer/polymer-element";
-import { Polymer } from "@polymer/polymer/polymer-legacy";
-
-const message =
-  "WARNING: Polymer will be removed from window in Home Assistant 2023.5. More info: https://developers.home-assistant.io/blog/2023/04/04/deprecating_polymer";
-
-const handler = {
-  get(target, prop, receiver) {
-    // eslint-disable-next-line no-console
-    console.warn(message);
-    document
-      .querySelector("home-assistant")
-      .dispatchEvent(
-        new CustomEvent("write_log", { detail: { message, level: "warning" } })
-      );
-    return Reflect.get(target, prop, receiver);
-  },
-  apply: function (target, thisArg, argumentsList) {
-    // eslint-disable-next-line no-console
-    console.warn(message);
-    document
-      .querySelector("home-assistant")
-      .dispatchEvent(
-        new CustomEvent("write_log", { detail: { message, level: "warning" } })
-      );
-    return Reflect.apply(target, thisArg, argumentsList);
-  },
-};
-
-Polymer.Element = PolymerElement;
-Polymer.html = html;
-
-window.Polymer = new Proxy(Polymer, handler);