Bring back lazy load more info + helper (#7131)

gallery/src/components/more-info-content.ts

@@ -1,7 +1,7 @@
 import { HassEntity } from "home-assistant-js-websocket";
 import { property, PropertyValues, UpdatingElement } from "lit-element";
 import dynamicContentUpdater from "../../../src/common/dom/dynamic_content_updater";
-import { stateMoreInfoType } from "../../../src/common/entity/state_more_info_type";
+import { stateMoreInfoType } from "../../../src/dialogs/more-info/state_more_info_control";
 import "../../../src/dialogs/more-info/controls/more-info-alarm_control_panel";
 import "../../../src/dialogs/more-info/controls/more-info-automation";
 import "../../../src/dialogs/more-info/controls/more-info-camera";

src/common/entity/state_more_info_type.ts

@@ -1,15 +0,0 @@
-import { HassEntity } from "home-assistant-js-websocket";
-import { DOMAINS_HIDE_MORE_INFO, DOMAINS_WITH_MORE_INFO } from "../const";
-import { computeStateDomain } from "./compute_state_domain";
-
-export const stateMoreInfoType = (stateObj: HassEntity) => {
-  const domain = computeStateDomain(stateObj);
-
-  if (DOMAINS_WITH_MORE_INFO.includes(domain)) {
-    return domain;
-  }
-  if (DOMAINS_HIDE_MORE_INFO.includes(domain)) {
-    return "hidden";
-  }
-  return "default";
-};

src/dialogs/more-info/ha-more-info-dialog.ts

@@ -21,7 +21,10 @@ import { dynamicElement } from "../../common/dom/dynamic-element-directive";
 import { fireEvent } from "../../common/dom/fire_event";
 import { computeDomain } from "../../common/entity/compute_domain";
 import { computeStateName } from "../../common/entity/compute_state_name";
-import { stateMoreInfoType } from "../../common/entity/state_more_info_type";
+import {
+  stateMoreInfoType,
+  importMoreInfoControl,
+} from "./state_more_info_control";
 import { navigate } from "../../common/navigate";
 import "../../components/ha-dialog";
 import "../../components/ha-header-bar";
@@ -34,28 +37,6 @@ import { HomeAssistant } from "../../types";
 import { showConfirmationDialog } from "../generic/show-dialog-box";
 import "./ha-more-info-history";
 import "./ha-more-info-logbook";
-
-import "./controls/more-info-alarm_control_panel";
-import "./controls/more-info-automation";
-import "./controls/more-info-camera";
-import "./controls/more-info-climate";
-import "./controls/more-info-configurator";
-import "./controls/more-info-counter";
-import "./controls/more-info-cover";
-import "./controls/more-info-fan";
-import "./controls/more-info-group";
-import "./controls/more-info-humidifier";
-import "./controls/more-info-input_datetime";
-import "./controls/more-info-light";
-import "./controls/more-info-lock";
-import "./controls/more-info-media_player";
-import "./controls/more-info-person";
-import "./controls/more-info-script";
-import "./controls/more-info-sun";
-import "./controls/more-info-timer";
-import "./controls/more-info-vacuum";
-import "./controls/more-info-water_heater";
-import "./controls/more-info-weather";
 import "./controls/more-info-default";
 
 const DOMAINS_NO_INFO = ["camera", "configurator"];
@@ -104,7 +85,8 @@ export class MoreInfoDialog extends LitElement {
       this._moreInfoType = stateObj.attributes.custom_ui_more_info;
     } else {
       const type = stateMoreInfoType(stateObj);
-      this._moreInfoType = `more-info-${type}`;
+      importMoreInfoControl(type);
+      this._moreInfoType = type === "hidden" ? undefined : `more-info-${type}`;
     }
   }
 

src/dialogs/more-info/state_more_info_control.ts

@@ -0,0 +1,49 @@
+import type { HassEntity } from "home-assistant-js-websocket";
+import {
+  DOMAINS_HIDE_MORE_INFO,
+  DOMAINS_WITH_MORE_INFO,
+} from "../../common/const";
+import { computeStateDomain } from "../../common/entity/compute_state_domain";
+
+const LAZY_LOADED_MORE_INFO_CONTROL = {
+  alarm_control_panel: () => import("./controls/more-info-alarm_control_panel"),
+  automation: () => import("./controls/more-info-automation"),
+  camera: () => import("./controls/more-info-camera"),
+  climate: () => import("./controls/more-info-climate"),
+  configurator: () => import("./controls/more-info-configurator"),
+  counter: () => import("./controls/more-info-counter"),
+  cover: () => import("./controls/more-info-cover"),
+  fan: () => import("./controls/more-info-fan"),
+  group: () => import("./controls/more-info-group"),
+  humidifier: () => import("./controls/more-info-humidifier"),
+  input_datetime: () => import("./controls/more-info-input_datetime"),
+  light: () => import("./controls/more-info-light"),
+  lock: () => import("./controls/more-info-lock"),
+  media_player: () => import("./controls/more-info-media_player"),
+  person: () => import("./controls/more-info-person"),
+  script: () => import("./controls/more-info-script"),
+  sun: () => import("./controls/more-info-sun"),
+  timer: () => import("./controls/more-info-timer"),
+  vacuum: () => import("./controls/more-info-vacuum"),
+  water_heater: () => import("./controls/more-info-water_heater"),
+  weather: () => import("./controls/more-info-weather"),
+};
+
+export const stateMoreInfoType = (stateObj: HassEntity): string => {
+  const domain = computeStateDomain(stateObj);
+
+  if (DOMAINS_WITH_MORE_INFO.includes(domain)) {
+    return domain;
+  }
+  if (DOMAINS_HIDE_MORE_INFO.includes(domain)) {
+    return "hidden";
+  }
+  return "default";
+};
+
+export const importMoreInfoControl = (type: string) => {
+  if (!(type in LAZY_LOADED_MORE_INFO_CONTROL)) {
+    return;
+  }
+  LAZY_LOADED_MORE_INFO_CONTROL[type]();
+};

src/panels/lovelace/custom-card-helpers.ts

@@ -3,3 +3,4 @@ export { createCardElement } from "./create-element/create-card-element";
 export { createHeaderFooterElement } from "./create-element/create-header-footer-element";
 export { createHuiElement } from "./create-element/create-hui-element";
 export { createRowElement } from "./create-element/create-row-element";
+export { importMoreInfoControl } from "../../dialogs/more-info/state_more_info_control";

test-mocha/common/entity/state_more_info_type_test.ts

@@ -1,6 +1,6 @@
 import { assert } from "chai";
 
-import { stateMoreInfoType } from "../../../src/common/entity/state_more_info_type";
+import { stateMoreInfoType } from "../../../src/dialogs/more-info/state_more_info_control";
 
 describe("stateMoreInfoType", () => {
   it("Returns media_player for media_player states", () => {