Defer loading of fallback domain icons (#23298)

src/common/const.ts

@@ -1,118 +1,9 @@
 /** Constants to be used in the frontend. */
 
-import {
-  mdiAccount,
-  mdiAirFilter,
-  mdiAlert,
-  mdiAppleSafari,
-  mdiBell,
-  mdiBookmark,
-  mdiBullhorn,
-  mdiButtonPointer,
-  mdiCalendar,
-  mdiCalendarClock,
-  mdiChatSleep,
-  mdiClipboardList,
-  mdiClock,
-  mdiCog,
-  mdiCommentAlert,
-  mdiCounter,
-  mdiEye,
-  mdiFlower,
-  mdiFormatListBulleted,
-  mdiFormTextbox,
-  mdiForumOutline,
-  mdiGoogleAssistant,
-  mdiGoogleCirclesCommunities,
-  mdiHomeAutomation,
-  mdiImage,
-  mdiImageFilterFrames,
-  mdiLightbulb,
-  mdiMapMarkerRadius,
-  mdiMicrophoneMessage,
-  mdiPalette,
-  mdiRayVertex,
-  mdiRemote,
-  mdiRobot,
-  mdiRobotMower,
-  mdiRobotVacuum,
-  mdiRoomService,
-  mdiScriptText,
-  mdiSpeakerMessage,
-  mdiThermostat,
-  mdiTimerOutline,
-  mdiToggleSwitch,
-  mdiWeatherPartlyCloudy,
-  mdiWhiteBalanceSunny,
-} from "@mdi/js";
-
-import { mdiHomeAssistant } from "../resources/home-assistant-logo-svg";
-
 // Constants should be alphabetically sorted by name.
 // Arrays with values should be alphabetically sorted if order doesn't matter.
 // Each constant should have a description what it is supposed to be used for.
 
-/** Icon to use when no icon specified for service. */
-export const DEFAULT_SERVICE_ICON = mdiRoomService;
-
-/** Icon to use when no icon specified for domain. */
-export const DEFAULT_DOMAIN_ICON = mdiBookmark;
-
-/** Icons for each domain */
-export const FIXED_DOMAIN_ICONS = {
-  air_quality: mdiAirFilter,
-  alert: mdiAlert,
-  automation: mdiRobot,
-  calendar: mdiCalendar,
-  climate: mdiThermostat,
-  configurator: mdiCog,
-  conversation: mdiForumOutline,
-  counter: mdiCounter,
-  date: mdiCalendar,
-  datetime: mdiCalendarClock,
-  demo: mdiHomeAssistant,
-  device_tracker: mdiAccount,
-  google_assistant: mdiGoogleAssistant,
-  group: mdiGoogleCirclesCommunities,
-  homeassistant: mdiHomeAssistant,
-  homekit: mdiHomeAutomation,
-  image_processing: mdiImageFilterFrames,
-  image: mdiImage,
-  input_boolean: mdiToggleSwitch,
-  input_button: mdiButtonPointer,
-  input_datetime: mdiCalendarClock,
-  input_number: mdiRayVertex,
-  input_select: mdiFormatListBulleted,
-  input_text: mdiFormTextbox,
-  lawn_mower: mdiRobotMower,
-  light: mdiLightbulb,
-  notify: mdiCommentAlert,
-  number: mdiRayVertex,
-  persistent_notification: mdiBell,
-  person: mdiAccount,
-  plant: mdiFlower,
-  proximity: mdiAppleSafari,
-  remote: mdiRemote,
-  scene: mdiPalette,
-  schedule: mdiCalendarClock,
-  script: mdiScriptText,
-  select: mdiFormatListBulleted,
-  sensor: mdiEye,
-  simple_alarm: mdiBell,
-  siren: mdiBullhorn,
-  stt: mdiMicrophoneMessage,
-  sun: mdiWhiteBalanceSunny,
-  text: mdiFormTextbox,
-  time: mdiClock,
-  timer: mdiTimerOutline,
-  todo: mdiClipboardList,
-  tts: mdiSpeakerMessage,
-  vacuum: mdiRobotVacuum,
-  wake_word: mdiChatSleep,
-  weather: mdiWeatherPartlyCloudy,
-  zone: mdiMapMarkerRadius,
-};
-
 /** Domains that have a state card. */
 export const DOMAINS_WITH_CARD = [
   "alert",

src/components/ha-domain-icon.ts

@@ -2,8 +2,11 @@ import type { CSSResultGroup } from "lit";
 import { css, html, LitElement, nothing } from "lit";
 import { customElement, property } from "lit/decorators";
 import { until } from "lit/directives/until";
-import { DEFAULT_DOMAIN_ICON, FIXED_DOMAIN_ICONS } from "../common/const";
+import {
-import { domainIcon } from "../data/icons";
+  DEFAULT_DOMAIN_ICON,
+  domainIcon,
+  FALLBACK_DOMAIN_ICONS,
+} from "../data/icons";
 import type { HomeAssistant } from "../types";
 import { brandsUrl } from "../util/brands-url";
 import "./ha-icon";
@@ -47,9 +50,9 @@ export class HaDomainIcon extends LitElement {
   }
 
   private _renderFallback() {
-    if (this.domain! in FIXED_DOMAIN_ICONS) {
+    if (this.domain! in FALLBACK_DOMAIN_ICONS) {
       return html`
-        <ha-svg-icon .path=${FIXED_DOMAIN_ICONS[this.domain!]}></ha-svg-icon>
+        <ha-svg-icon .path=${FALLBACK_DOMAIN_ICONS[this.domain!]}></ha-svg-icon>
       `;
     }
     if (this.brandFallback) {

src/components/ha-service-icon.ts

@@ -1,9 +1,12 @@
 import { html, LitElement, nothing } from "lit";
 import { customElement, property } from "lit/decorators";
 import { until } from "lit/directives/until";
-import { DEFAULT_SERVICE_ICON, FIXED_DOMAIN_ICONS } from "../common/const";
 import { computeDomain } from "../common/entity/compute_domain";
-import { serviceIcon } from "../data/icons";
+import {
+  DEFAULT_SERVICE_ICON,
+  FALLBACK_DOMAIN_ICONS,
+  serviceIcon,
+} from "../data/icons";
 import type { HomeAssistant } from "../types";
 import "./ha-icon";
 import "./ha-svg-icon";
@@ -44,7 +47,7 @@ export class HaServiceIcon extends LitElement {
 
     return html`
       <ha-svg-icon
-        .path=${FIXED_DOMAIN_ICONS[domain] || DEFAULT_SERVICE_ICON}
+        .path=${FALLBACK_DOMAIN_ICONS[domain] || DEFAULT_SERVICE_ICON}
       ></ha-svg-icon>
     `;
   }

src/components/ha-state-icon.ts

@@ -2,9 +2,12 @@ import type { HassEntity } from "home-assistant-js-websocket";
 import { html, LitElement, nothing } from "lit";
 import { customElement, property } from "lit/decorators";
 import { until } from "lit/directives/until";
-import { DEFAULT_DOMAIN_ICON, FIXED_DOMAIN_ICONS } from "../common/const";
 import { computeStateDomain } from "../common/entity/compute_state_domain";
-import { entityIcon } from "../data/icons";
+import {
+  DEFAULT_DOMAIN_ICON,
+  entityIcon,
+  FALLBACK_DOMAIN_ICONS,
+} from "../data/icons";
 import type { HomeAssistant } from "../types";
 import "./ha-icon";
 import "./ha-svg-icon";
@@ -49,7 +52,7 @@ export class HaStateIcon extends LitElement {
 
     return html`
       <ha-svg-icon
-        .path=${FIXED_DOMAIN_ICONS[domain] || DEFAULT_DOMAIN_ICON}
+        .path=${FALLBACK_DOMAIN_ICONS[domain] || DEFAULT_DOMAIN_ICON}
       ></ha-svg-icon>
     `;
   }

src/data/icons.ts

@@ -1,4 +1,51 @@
+import {
+  mdiAccount,
+  mdiAirFilter,
+  mdiAlert,
+  mdiAppleSafari,
+  mdiBell,
+  mdiBookmark,
+  mdiBullhorn,
+  mdiButtonPointer,
+  mdiCalendar,
+  mdiCalendarClock,
+  mdiChatSleep,
+  mdiClipboardList,
+  mdiClock,
+  mdiCog,
+  mdiCommentAlert,
+  mdiCounter,
+  mdiEye,
+  mdiFlower,
+  mdiFormatListBulleted,
+  mdiFormTextbox,
+  mdiForumOutline,
+  mdiGoogleAssistant,
+  mdiGoogleCirclesCommunities,
+  mdiHomeAutomation,
+  mdiImage,
+  mdiImageFilterFrames,
+  mdiLightbulb,
+  mdiMapMarkerRadius,
+  mdiMicrophoneMessage,
+  mdiPalette,
+  mdiRayVertex,
+  mdiRemote,
+  mdiRobot,
+  mdiRobotMower,
+  mdiRobotVacuum,
+  mdiRoomService,
+  mdiScriptText,
+  mdiSpeakerMessage,
+  mdiThermostat,
+  mdiTimerOutline,
+  mdiToggleSwitch,
+  mdiWeatherPartlyCloudy,
+  mdiWhiteBalanceSunny,
+} from "@mdi/js";
 import type { HassEntity } from "home-assistant-js-websocket";
+import { isComponentLoaded } from "../common/config/is_component_loaded";
+import { atLeastVersion } from "../common/config/version";
 import { computeDomain } from "../common/entity/compute_domain";
 import { computeObjectId } from "../common/entity/compute_object_id";
 import { computeStateDomain } from "../common/entity/compute_state_domain";
@@ -8,8 +55,69 @@ import type {
   EntityRegistryDisplayEntry,
   EntityRegistryEntry,
 } from "./entity_registry";
-import { isComponentLoaded } from "../common/config/is_component_loaded";
+
-import { atLeastVersion } from "../common/config/version";
+import { mdiHomeAssistant } from "../resources/home-assistant-logo-svg";
+
+/** Icon to use when no icon specified for service. */
+export const DEFAULT_SERVICE_ICON = mdiRoomService;
+
+/** Icon to use when no icon specified for domain. */
+export const DEFAULT_DOMAIN_ICON = mdiBookmark;
+
+/** Fallback icons for each domain */
+export const FALLBACK_DOMAIN_ICONS = {
+  air_quality: mdiAirFilter,
+  alert: mdiAlert,
+  automation: mdiRobot,
+  calendar: mdiCalendar,
+  climate: mdiThermostat,
+  configurator: mdiCog,
+  conversation: mdiForumOutline,
+  counter: mdiCounter,
+  date: mdiCalendar,
+  datetime: mdiCalendarClock,
+  demo: mdiHomeAssistant,
+  device_tracker: mdiAccount,
+  google_assistant: mdiGoogleAssistant,
+  group: mdiGoogleCirclesCommunities,
+  homeassistant: mdiHomeAssistant,
+  homekit: mdiHomeAutomation,
+  image_processing: mdiImageFilterFrames,
+  image: mdiImage,
+  input_boolean: mdiToggleSwitch,
+  input_button: mdiButtonPointer,
+  input_datetime: mdiCalendarClock,
+  input_number: mdiRayVertex,
+  input_select: mdiFormatListBulleted,
+  input_text: mdiFormTextbox,
+  lawn_mower: mdiRobotMower,
+  light: mdiLightbulb,
+  notify: mdiCommentAlert,
+  number: mdiRayVertex,
+  persistent_notification: mdiBell,
+  person: mdiAccount,
+  plant: mdiFlower,
+  proximity: mdiAppleSafari,
+  remote: mdiRemote,
+  scene: mdiPalette,
+  schedule: mdiCalendarClock,
+  script: mdiScriptText,
+  select: mdiFormatListBulleted,
+  sensor: mdiEye,
+  simple_alarm: mdiBell,
+  siren: mdiBullhorn,
+  stt: mdiMicrophoneMessage,
+  sun: mdiWhiteBalanceSunny,
+  text: mdiFormTextbox,
+  time: mdiClock,
+  timer: mdiTimerOutline,
+  todo: mdiClipboardList,
+  tts: mdiSpeakerMessage,
+  vacuum: mdiRobotVacuum,
+  wake_word: mdiChatSleep,
+  weather: mdiWeatherPartlyCloudy,
+  zone: mdiMapMarkerRadius,
+};
 
 const resources: {
   entity: Record<string, Promise<PlatformIcons>>;