From fe9967550bba7a9f9c5293b26383be0e2f9ac230 Mon Sep 17 00:00:00 2001
From: Bram Kragten <mail@bramkragten.nl>
Date: Thu, 13 Oct 2022 14:28:49 +0200
Subject: [PATCH] Load selector elements dynamic (#14084)

Co-authored-by: Paul Bottein <paul.bottein@gmail.com>
---
 src/components/ha-form/ha-form.ts         | 30 ++---------
 src/components/ha-selector/ha-selector.ts | 65 +++++++++++++----------
 2 files changed, 42 insertions(+), 53 deletions(-)

diff --git a/src/components/ha-form/ha-form.ts b/src/components/ha-form/ha-form.ts
index 7f83b3220c..dd1a5e294b 100644
--- a/src/components/ha-form/ha-form.ts
+++ b/src/components/ha-form/ha-form.ts
@@ -1,34 +1,26 @@
-import {
-  css,
-  CSSResultGroup,
-  html,
-  LitElement,
-  PropertyValues,
-  TemplateResult,
-} from "lit";
+import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit";
 import { customElement, property } from "lit/decorators";
 import { dynamicElement } from "../../common/dom/dynamic-element-directive";
 import { fireEvent } from "../../common/dom/fire_event";
+import { HomeAssistant } from "../../types";
 import "../ha-alert";
+import "../ha-selector/ha-selector";
 import "./ha-form-boolean";
 import "./ha-form-constant";
-import "./ha-form-grid";
 import "./ha-form-float";
+import "./ha-form-grid";
 import "./ha-form-integer";
 import "./ha-form-multi_select";
 import "./ha-form-positive_time_period_dict";
 import "./ha-form-select";
 import "./ha-form-string";
-import { HaFormElement, HaFormDataContainer, HaFormSchema } from "./types";
-import { HomeAssistant } from "../../types";
+import { HaFormDataContainer, HaFormElement, HaFormSchema } from "./types";
 
 const getValue = (obj, item) =>
   obj ? (!item.name ? obj : obj[item.name]) : null;
 
 const getError = (obj, item) => (obj && item.name ? obj[item.name] : null);
 
-let selectorImported = false;
-
 @customElement("ha-form")
 export class HaForm extends LitElement implements HaFormElement {
   @property({ attribute: false }) public hass!: HomeAssistant;
@@ -63,18 +55,6 @@ export class HaForm extends LitElement implements HaFormElement {
     }
   }
 
-  willUpdate(changedProperties: PropertyValues) {
-    super.willUpdate(changedProperties);
-    if (
-      !selectorImported &&
-      changedProperties.has("schema") &&
-      this.schema?.some((item) => "selector" in item)
-    ) {
-      selectorImported = true;
-      import("../ha-selector/ha-selector");
-    }
-  }
-
   protected render(): TemplateResult {
     return html`
       <div class="root" part="root">
diff --git a/src/components/ha-selector/ha-selector.ts b/src/components/ha-selector/ha-selector.ts
index bc177836f5..d4074c49c4 100644
--- a/src/components/ha-selector/ha-selector.ts
+++ b/src/components/ha-selector/ha-selector.ts
@@ -1,35 +1,38 @@
-import { html, LitElement } from "lit";
+import { html, LitElement, PropertyValues } from "lit";
 import { customElement, property } from "lit/decorators";
 import { dynamicElement } from "../../common/dom/dynamic-element-directive";
 import type { Selector } from "../../data/selector";
 import type { HomeAssistant } from "../../types";
-import "./ha-selector-action";
-import "./ha-selector-addon";
-import "./ha-selector-area";
-import "./ha-selector-attribute";
-import "./ha-selector-boolean";
-import "./ha-selector-color-rgb";
-import "./ha-selector-config-entry";
-import "./ha-selector-date";
-import "./ha-selector-datetime";
-import "./ha-selector-device";
-import "./ha-selector-duration";
-import "./ha-selector-entity";
-import "./ha-selector-file";
-import "./ha-selector-navigation";
-import "./ha-selector-number";
-import "./ha-selector-object";
-import "./ha-selector-select";
-import "./ha-selector-state";
-import "./ha-selector-target";
-import "./ha-selector-template";
-import "./ha-selector-text";
-import "./ha-selector-time";
-import "./ha-selector-icon";
-import "./ha-selector-media";
-import "./ha-selector-theme";
-import "./ha-selector-location";
-import "./ha-selector-color-temp";
+
+const LOAD_ELEMENTS = {
+  action: () => import("./ha-selector-action"),
+  addon: () => import("./ha-selector-addon"),
+  area: () => import("./ha-selector-area"),
+  attribute: () => import("./ha-selector-attribute"),
+  boolean: () => import("./ha-selector-boolean"),
+  "color-rgb": () => import("./ha-selector-color-rgb"),
+  "config-entry": () => import("./ha-selector-config-entry"),
+  date: () => import("./ha-selector-date"),
+  datetime: () => import("./ha-selector-datetime"),
+  device: () => import("./ha-selector-device"),
+  duration: () => import("./ha-selector-duration"),
+  entity: () => import("./ha-selector-entity"),
+  file: () => import("./ha-selector-file"),
+  navigation: () => import("./ha-selector-navigation"),
+  number: () => import("./ha-selector-number"),
+  object: () => import("./ha-selector-object"),
+  select: () => import("./ha-selector-select"),
+  state: () => import("./ha-selector-state"),
+  target: () => import("./ha-selector-target"),
+  template: () => import("./ha-selector-template"),
+  text: () => import("./ha-selector-text"),
+  time: () => import("./ha-selector-time"),
+  icon: () => import("./ha-selector-icon"),
+  media: () => import("./ha-selector-media"),
+  theme: () => import("./ha-selector-theme"),
+  location: () => import("./ha-selector-location"),
+  "color-temp": () => import("./ha-selector-color-temp"),
+};
 
 @customElement("ha-selector")
 export class HaSelector extends LitElement {
@@ -59,6 +62,12 @@ export class HaSelector extends LitElement {
     return Object.keys(this.selector)[0];
   }
 
+  protected willUpdate(changedProps: PropertyValues) {
+    if (changedProps.has("selector") && this.selector) {
+      LOAD_ELEMENTS[this._type]?.();
+    }
+  }
+
   protected render() {
     return html`
       ${dynamicElement(`ha-selector-${this._type}`, {