Improve performance and editor

src/panels/lovelace/common/ha-card-condition-editor.ts

@@ -44,6 +44,11 @@ export default class HaCardConditionEditor extends LitElement {
           )}
           .path=${yamlMode ? mdiListBoxOutline : mdiCodeBraces}
         ></ha-icon-button>
+        <span class="title">
+          ${this.hass.localize(
+            `ui.panel.lovelace.editor.card.conditional.condition.${condition.condition}.label`
+          ) || condition.condition}
+        </span>
         <ha-icon-button
           .label=${this.hass!.localize("ui.common.delete")}
           .path=${mdiDelete}
@@ -100,8 +105,13 @@ export default class HaCardConditionEditor extends LitElement {
       .header {
         display: flex;
         flex-direction: row;
+        align-items: center;
         justify-content: space-between;
       }
+      .header span {
+        flex: 1;
+        font-size: 16px;
+      }
       .content {
         padding: 12px;
       }

src/panels/lovelace/common/types/ha-card-condition-responsive.ts

@@ -122,11 +122,11 @@ export class HaCardConditionResponsive extends LitElement {
                 return {
                   value: b,
                   label: `${localize(
-                    `ui.panel.lovelace.editor.card.conditional.types.responsive.breakpoints_list.${b}`
+                    `ui.panel.lovelace.editor.card.conditional.condition.responsive.breakpoints_list.${b}`
                   )}${
                     value
                       ? ` (${localize(
-                          `ui.panel.lovelace.editor.card.conditional.types.responsive.min`,
+                          `ui.panel.lovelace.editor.card.conditional.condition.responsive.min`,
                           { size: value }
                         )})`
                       : ""
@@ -181,7 +181,7 @@ export class HaCardConditionResponsive extends LitElement {
     switch (schema.name) {
       case "breakpoints":
         return this.hass.localize(
-          `ui.panel.lovelace.editor.card.conditional.types.responsive.${schema.name}`
+          `ui.panel.lovelace.editor.card.conditional.condition.responsive.${schema.name}`
         );
       default:
         return "";

src/panels/lovelace/components/hui-conditional-base.ts

@@ -82,8 +82,8 @@ export class HuiConditionalBase extends ReactiveElement {
     ) as ResponsiveCondition[];
 
     const mediaQueries = conditions
-      .map((c) => c.media_query ?? "")
+      .filter((c) => c.media_query)
-      .filter((m) => m !== "");
+      .map((c) => c.media_query as string);
 
     if (deepEqual(mediaQueries, this._mediaQueries)) return;
 
@@ -92,7 +92,12 @@ export class HuiConditionalBase extends ReactiveElement {
       this._mediaQueriesListeners.pop()!();
     }
     mediaQueries.forEach((query) => {
-      const listener = listenMediaQuery(query, () => {
+      const listener = listenMediaQuery(query, (matches) => {
+        // For performance, if there is only one condition, set the visibility directly
+        if (this._config!.conditions.length === 1) {
+          this._setVisibility(matches);
+          return;
+        }
         this._updateVisibility();
       });
       this._mediaQueriesListeners.push(listener);
@@ -117,20 +122,29 @@ export class HuiConditionalBase extends ReactiveElement {
       return;
     }
 
-    this._element!.editMode = this.editMode;
+    this._element.editMode = this.editMode;
 
-    const visible =
+    const conditionMet = checkConditionsMet(
-      this.editMode || checkConditionsMet(this._config!.conditions, this.hass!);
+      this._config!.conditions,
+      this.hass!
+    );
+    this._setVisibility(conditionMet);
+  }
+
+  private _setVisibility(conditionMet: boolean) {
+    if (!this._element || !this.hass) {
+      return;
+    }
+    const visible = this.editMode || conditionMet;
     this.hidden = !visible;
-
     this.style.setProperty("display", visible ? "" : "none");
 
     if (visible) {
-      this._element!.hass = this.hass;
+      this._element.hass = this.hass;
       if (!this._element!.parentElement) {
         this.appendChild(this._element!);
       }
-    } else if (this._element!.parentElement) {
+    } else if (this._element.parentElement) {
       this.removeChild(this._element!);
     }
   }

src/panels/lovelace/editor/config-elements/hui-conditional-card-editor.ts

@@ -111,7 +111,6 @@ export class HuiConditionalCardEditor
                         )}
                         .path=${isGuiMode ? mdiCodeBraces : mdiListBoxOutline}
                       ></ha-icon-button>
-
                       <ha-icon-button
                         .label=${this.hass!.localize(
                           "ui.panel.lovelace.editor.edit_card.copy"

src/translations/en.json

@@ -4769,7 +4769,7 @@
               "current_state": "current",
               "condition_explanation": "The card will be shown when ALL conditions below are fulfilled.",
               "change_type": "Change type",
-              "types": {
+              "condition": {
                 "responsive": {
                   "label": "Responsive",
                   "breakpoints": "Screen sizes",