Optimize script editor (#5650)

src/panels/config/automation/ha-config-automation.ts

@@ -12,6 +12,13 @@ import "./ha-automation-editor";
 import "./ha-automation-picker";
 import { debounce } from "../../../common/util/debounce";
 
+const equal = (a: AutomationEntity[], b: AutomationEntity[]): boolean => {
+  if (a.length !== b.length) {
+    return false;
+  }
+  return a.every((automation, index) => automation === b[index]);
+};
+
 @customElement("ha-config-automation")
 class HaConfigAutomation extends HassRouterPage {
   @property() public hass!: HomeAssistant;
@@ -26,7 +33,7 @@ class HaConfigAutomation extends HassRouterPage {
 
   private _debouncedUpdateAutomations = debounce((pageEl) => {
     const newAutomations = this._getAutomations(this.hass.states);
-    if (!this._equal(newAutomations, pageEl.automations)) {
+    if (!equal(newAutomations, pageEl.automations)) {
       pageEl.automations = newAutomations;
     }
   }, 10);
@@ -82,13 +89,6 @@ class HaConfigAutomation extends HassRouterPage {
       pageEl.automationId = automationId === "new" ? null : automationId;
     }
   }
-
-  private _equal(a: AutomationEntity[], b: AutomationEntity[]): boolean {
-    if (a.length !== b.length) {
-      return false;
-    }
-    return a.every((automation, index) => automation === b[index]);
-  }
 }
 
 declare global {

src/panels/config/script/ha-config-script.ts

@@ -1,4 +1,4 @@
-import { HassEntities, HassEntity } from "home-assistant-js-websocket";
+import { HassEntities } from "home-assistant-js-websocket";
 import { customElement, property, PropertyValues } from "lit-element";
 import memoizeOne from "memoize-one";
 import { computeStateDomain } from "../../../common/entity/compute_state_domain";
@@ -9,6 +9,15 @@ import {
 import { HomeAssistant } from "../../../types";
 import "./ha-script-editor";
 import "./ha-script-picker";
+import { debounce } from "../../../common/util/debounce";
+import { ScriptEntity } from "../../../data/script";
+
+const equal = (a: ScriptEntity[], b: ScriptEntity[]): boolean => {
+  if (a.length !== b.length) {
+    return false;
+  }
+  return a.every((enityA, index) => enityA === b[index]);
+};
 
 @customElement("ha-config-script")
 class HaConfigScript extends HassRouterPage {
@@ -20,7 +29,7 @@ class HaConfigScript extends HassRouterPage {
 
   @property() public showAdvanced!: boolean;
 
-  @property() public scripts: HassEntity[] = [];
+  @property() public scripts: ScriptEntity[] = [];
 
   protected routerOptions: RouterOptions = {
     defaultPage: "dashboard",
@@ -35,15 +44,18 @@ class HaConfigScript extends HassRouterPage {
     },
   };
 
-  private _computeScripts = memoizeOne((states: HassEntities) => {
-    const scripts: HassEntity[] = [];
-    Object.values(states).forEach((state) => {
-      if (computeStateDomain(state) === "script" && !state.attributes.hidden) {
-        scripts.push(state);
-      }
-    });
+  private _debouncedUpdateScripts = debounce((pageEl) => {
+    const newScript = this._getScripts(this.hass.states);
+    if (!equal(newScript, pageEl.scripts)) {
+      pageEl.scripts = newScript;
+    }
+  }, 10);
 
-    return scripts;
+  private _getScripts = memoizeOne((states: HassEntities): ScriptEntity[] => {
+    return Object.values(states).filter(
+      (entity) =>
+        computeStateDomain(entity) === "script" && !entity.attributes.hidden
+    ) as ScriptEntity[];
   });
 
   protected firstUpdated(changedProps) {
@@ -59,7 +71,11 @@ class HaConfigScript extends HassRouterPage {
     pageEl.showAdvanced = this.showAdvanced;
 
     if (this.hass) {
-      pageEl.scripts = this._computeScripts(this.hass.states);
+      if (!pageEl.scripts || !changedProps) {
+        pageEl.scripts = this._getScripts(this.hass.states);
+      } else if (changedProps && changedProps.has("hass")) {
+        this._debouncedUpdateScripts(pageEl);
+      }
     }
 
     if (
@@ -68,13 +84,7 @@ class HaConfigScript extends HassRouterPage {
     ) {
       pageEl.creatingNew = undefined;
       const scriptEntityId = this.routeTail.path.substr(1);
-      pageEl.creatingNew = scriptEntityId === "new";
-      pageEl.script =
-        scriptEntityId === "new"
-          ? undefined
-          : pageEl.scripts.find(
-              (entity: HassEntity) => entity.entity_id === scriptEntityId
-            );
+      pageEl.scriptEntityId = scriptEntityId === "new" ? null : scriptEntityId;
     }
   }
 }

src/panels/config/script/ha-script-editor.ts

@@ -22,7 +22,6 @@ import {
   deleteScript,
   getScriptEditorInitData,
   ScriptConfig,
-  ScriptEntity,
 } from "../../../data/script";
 import { showConfirmationDialog } from "../../../dialogs/generic/show-dialog-box";
 import "../../../layouts/ha-app-layout";
@@ -36,16 +35,14 @@ import { configSections } from "../ha-panel-config";
 export class HaScriptEditor extends LitElement {
   @property() public hass!: HomeAssistant;
 
-  @property() public script!: ScriptEntity;
+  @property() public scriptEntityId!: string;
+
+  @property() public route!: Route;
 
   @property() public isWide?: boolean;
 
   @property() public narrow!: boolean;
 
-  @property() public route!: Route;
-
-  @property() public creatingNew?: boolean;
-
   @property() private _config?: ScriptConfig;
 
   @property() private _dirty?: boolean;
@@ -61,7 +58,7 @@ export class HaScriptEditor extends LitElement {
         .backCallback=${() => this._backTapped()}
         .tabs=${configSections.automation}
       >
-        ${this.creatingNew
+        ${!this.scriptEntityId
           ? ""
           : html`
               <paper-icon-button
@@ -161,18 +158,18 @@ export class HaScriptEditor extends LitElement {
   protected updated(changedProps: PropertyValues): void {
     super.updated(changedProps);
 
-    const oldScript = changedProps.get("script") as ScriptEntity;
+    const oldScript = changedProps.get("scriptEntityId");
     if (
-      changedProps.has("script") &&
-      this.script &&
+      changedProps.has("scriptEntityId") &&
+      this.scriptEntityId &&
       this.hass &&
       // Only refresh config if we picked a new script. If same ID, don't fetch it.
-      (!oldScript || oldScript.entity_id !== this.script.entity_id)
+      (!oldScript || oldScript !== this.scriptEntityId)
     ) {
       this.hass
         .callApi<ScriptConfig>(
           "GET",
-          `config/script/config/${computeObjectId(this.script.entity_id)}`
+          `config/script/config/${computeObjectId(this.scriptEntityId)}`
         )
         .then(
           (config) => {
@@ -202,7 +199,11 @@ export class HaScriptEditor extends LitElement {
         );
     }
 
-    if (changedProps.has("creatingNew") && this.creatingNew && this.hass) {
+    if (
+      changedProps.has("scriptEntityId") &&
+      !this.scriptEntityId &&
+      this.hass
+    ) {
       const initData = getScriptEditorInitData();
       this._dirty = !!initData;
       this._config = {
@@ -259,19 +260,19 @@ export class HaScriptEditor extends LitElement {
   }
 
   private async _delete() {
-    await deleteScript(this.hass, computeObjectId(this.script.entity_id));
+    await deleteScript(this.hass, computeObjectId(this.scriptEntityId));
     history.back();
   }
 
   private _saveScript(): void {
-    const id = this.creatingNew
-      ? "" + Date.now()
-      : computeObjectId(this.script.entity_id);
+    const id = this.scriptEntityId
+      ? computeObjectId(this.scriptEntityId)
+      : Date.now();
     this.hass!.callApi("POST", "config/script/config/" + id, this._config).then(
       () => {
         this._dirty = false;
 
-        if (this.creatingNew) {
+        if (!this.scriptEntityId) {
           navigate(this, `/config/script/edit/${id}`, true);
         }
       },