Make helper forms lazy load (#17068)

src/panels/config/helpers/dialog-helper-detail.ts

@@ -33,38 +33,59 @@ import { haStyleDialog } from "../../../resources/styles";
 import { HomeAssistant } from "../../../types";
 import { brandsUrl } from "../../../util/brands-url";
 import { Helper, HelperDomain } from "./const";
-import "./forms/ha-counter-form";
-import "./forms/ha-input_boolean-form";
-import "./forms/ha-input_button-form";
-import "./forms/ha-input_datetime-form";
-import "./forms/ha-input_number-form";
-import "./forms/ha-input_select-form";
-import "./forms/ha-input_text-form";
-import "./forms/ha-schedule-form";
-import "./forms/ha-timer-form";
 import type { ShowDialogHelperDetailParams } from "./show-dialog-helper-detail";
 
 type HelperCreators = {
-  [domain in HelperDomain]: (
-    hass: HomeAssistant,
-    // Not properly typed because there is currently a mismatch for this._item between:
-    // 1. Type passed to form should be Helper
-    // 2. Type received by creator should be MutableParams version
-    // The two are not compatible.
-    params: any
-  ) => Promise<Helper>;
+  [domain in HelperDomain]: {
+    create: (
+      hass: HomeAssistant,
+      // Not properly typed because there is currently a mismatch for this._item between:
+      // 1. Type passed to form should be Helper
+      // 2. Type received by creator should be MutableParams version
+      // The two are not compatible.
+      params: any
+    ) => Promise<Helper>;
+    import: () => Promise<unknown>;
+  };
 };
 
 const HELPERS: HelperCreators = {
-  input_boolean: createInputBoolean,
-  input_button: createInputButton,
-  input_text: createInputText,
-  input_number: createInputNumber,
-  input_datetime: createInputDateTime,
-  input_select: createInputSelect,
-  counter: createCounter,
-  timer: createTimer,
-  schedule: createSchedule,
+  input_boolean: {
+    create: createInputBoolean,
+    import: () => import("./forms/ha-input_boolean-form"),
+  },
+  input_button: {
+    create: createInputButton,
+    import: () => import("./forms/ha-input_button-form"),
+  },
+  input_text: {
+    create: createInputText,
+    import: () => import("./forms/ha-input_text-form"),
+  },
+  input_number: {
+    create: createInputNumber,
+    import: () => import("./forms/ha-input_number-form"),
+  },
+  input_datetime: {
+    create: createInputDateTime,
+    import: () => import("./forms/ha-input_datetime-form"),
+  },
+  input_select: {
+    create: createInputSelect,
+    import: () => import("./forms/ha-input_select-form"),
+  },
+  counter: {
+    create: createCounter,
+    import: () => import("./forms/ha-counter-form"),
+  },
+  timer: {
+    create: createTimer,
+    import: () => import("./forms/ha-timer-form"),
+  },
+  schedule: {
+    create: createSchedule,
+    import: () => import("./forms/ha-schedule-form"),
+  },
 };
 
 @customElement("dialog-helper-detail")
@@ -85,6 +106,8 @@ export class DialogHelperDetail extends LitElement {
 
   @state() private _helperFlows?: string[];
 
+  @state() private _loading = false;
+
   private _params?: ShowDialogHelperDetailParams;
 
   public async showDialog(params: ShowDialogHelperDetailParams): Promise<void> {
@@ -140,7 +163,7 @@ export class DialogHelperDetail extends LitElement {
           ${this.hass!.localize("ui.common.back")}
         </mwc-button>
       `;
-    } else if (this._helperFlows === undefined) {
+    } else if (this._loading || this._helperFlows === undefined) {
       content = html`<ha-circular-progress active></ha-circular-progress>`;
     } else {
       const items: [string, string][] = [];
@@ -250,7 +273,7 @@ export class DialogHelperDetail extends LitElement {
     this._submitting = true;
     this._error = "";
     try {
-      await HELPERS[this._domain](this.hass, this._item);
+      await HELPERS[this._domain].create(this.hass, this._item);
       this.closeDialog();
     } catch (err: any) {
       this._error = err.message || "Unknown error";
@@ -259,14 +282,22 @@ export class DialogHelperDetail extends LitElement {
     }
   }
 
-  private _domainPicked(ev: CustomEvent<RequestSelectedDetail>): void {
+  private async _domainPicked(
+    ev: CustomEvent<RequestSelectedDetail>
+  ): Promise<void> {
     if (!shouldHandleRequestSelectedEvent(ev)) {
       return;
     }
     const domain = (ev.currentTarget! as any).domain;
 
     if (domain in HELPERS) {
-      this._domain = domain;
+      this._loading = true;
+      try {
+        await HELPERS[domain].import();
+        this._domain = domain;
+      } finally {
+        this._loading = false;
+      }
       this._focusForm();
     } else {
       showConfigFlowDialog(this, {