Optimize the performance

Author: RomRider

package-lock.json

@@ -54,6 +54,7 @@
   "dependencies": {
     "custom-card-helpers": "^1.5.0",
     "home-assistant-js-websocket": "^5.1.0",
-    "lit-element": "^2.3.0"
+    "lit-element": "^2.3.0",
+    "resize-observer": "^1.0.0"
   }
 }

package.json

@@ -3,6 +3,7 @@ import { HomeAssistant, getLovelace, createThing, LovelaceCardConfig, LovelaceCa
 import { DeclutteringCardConfig, TemplateConfig } from './types';
 import deepReplace from './deep-replace';
 import getLovelaceCast from './getLovelaceCast';
+import { ResizeObserver } from 'resize-observer';
 import * as pjson from '../package.json';
 
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
@@ -19,10 +20,12 @@ console.info(
 class DeclutteringCard extends LitElement {
   @property() protected _card?: LovelaceCard;
 
-  @property() private _hass?: HomeAssistant;
-
   @property() private _config?: LovelaceCardConfig;
 
+  private _ro?: ResizeObserver;
+
+  private _hass?: HomeAssistant;
+
   set hass(hass: HomeAssistant) {
     this._hass = hass;
     if (this._card) {
@@ -38,16 +41,20 @@ class DeclutteringCard extends LitElement {
     `;
   }
 
-  protected updated(): void {
+  protected firstUpdated(): void {
     this.updateComplete.then(() => {
-      if (this._card?.style.display === 'none') {
-        this.className = 'child-card-hidden';
-      } else if (this.className === 'child-card-hidden') {
-        this.className = '';
-      }
+      this._displayHidden();
     });
   }
 
+  protected _displayHidden(): void {
+    if (this._card?.style.display === 'none') {
+      this.classList.add('child-card-hidden');
+    } else if (this.classList.contains('child-card-hidden')) {
+      this.classList.remove('child-card-hidden');
+    }
+  }
+
   public setConfig(config: DeclutteringCardConfig): void {
     if (!config.template) {
       throw new Error('Missing template object in your config');
@@ -64,10 +71,14 @@ class DeclutteringCard extends LitElement {
     } else if (templateConfig.card && templateConfig.element) {
       throw new Error('You can define a card and an element in the template');
     }
+    this._ro = new ResizeObserver(() => {
+      this._displayHidden();
+    });
     this._config = deepReplace(config.variables, templateConfig);
     const type = templateConfig.card ? 'card' : 'element';
     this._createCard(this._config, type).then(card => {
       this._card = card;
+      this._ro?.observe(this._card);
       return this._card;
     });
   }
@@ -121,6 +132,7 @@ class DeclutteringCard extends LitElement {
     const newCard = await this._createCard(config, type);
     element.replaceWith(newCard);
     this._card = newCard;
+    this._ro?.observe(this._card);
     return;
   }