Fix markdown card crashing the demo (#5962)

src/panels/lovelace/cards/hui-markdown-card.ts

@@ -41,7 +41,7 @@ export class HuiMarkdownCard extends LitElement implements LovelaceCard {
 
   @property() private _content = "";
 
-  @property() private _unsubRenderTemplate?: Promise<UnsubscribeFunc>;
+  @property() private _unsubRenderTemplate?: UnsubscribeFunc;
 
   public getCardSize(): number {
     return this._config === undefined
@@ -121,24 +121,25 @@ export class HuiMarkdownCard extends LitElement implements LovelaceCard {
       return;
     }
 
-    this._unsubRenderTemplate = subscribeRenderTemplate(
-      this.hass.connection,
-      (result) => {
-        this._content = result;
-      },
-      {
-        template: this._config.content,
-        entity_ids: this._config.entity_id,
-        variables: {
-          config: this._config,
-          user: this.hass.user!.name,
+    try {
+      this._unsubRenderTemplate = await subscribeRenderTemplate(
+        this.hass.connection,
+        (result) => {
+          this._content = result;
         },
-      }
-    );
-    this._unsubRenderTemplate.catch(() => {
+        {
+          template: this._config.content,
+          entity_ids: this._config.entity_id,
+          variables: {
+            config: this._config,
+            user: this.hass.user!.name,
+          },
+        }
+      );
+    } catch {
       this._content = this._config!.content;
       this._unsubRenderTemplate = undefined;
-    });
+    }
   }
 
   private async _tryDisconnect(): Promise<void> {
@@ -147,9 +148,8 @@ export class HuiMarkdownCard extends LitElement implements LovelaceCard {
     }
 
     try {
-      const unsub = await this._unsubRenderTemplate;
+      this._unsubRenderTemplate();
       this._unsubRenderTemplate = undefined;
-      unsub();
     } catch (e) {
       if (e.code === "not_found") {
         // If we get here, the connection was probably already closed. Ignore.

src/panels/lovelace/cards/hui-weather-forecast-card.ts

@@ -115,6 +115,7 @@ class HuiWeatherForecastCard extends LitElement implements LovelaceCard {
       oldConfig.theme !== this._config.theme
     ) {
       applyThemesOnElement(this, this.hass.themes, this._config.theme);
+      this.requestUpdate();
     }
   }
 

src/panels/lovelace/common/compute-card-size.ts

@@ -1,5 +1,5 @@
 import { LovelaceCard } from "../types";
 
 export const computeCardSize = (card: LovelaceCard): number => {
-  return typeof card.getCardSize === "function" ? card.getCardSize() : 1;
+  return typeof card.getCardSize === "function" ? card.getCardSize() : 4;
 };

src/panels/lovelace/editor/card-editor/hui-card-picker.ts

@@ -284,16 +284,23 @@ export class HuiCardPicker extends LitElement {
       "ll-rebuild",
       (ev) => {
         ev.stopPropagation();
-        element.parentElement!.replaceChild(
-          this._createCardElement(cardConfig),
-          element
-        );
+        this._rebuildCard(element, cardConfig);
       },
       { once: true }
     );
     return element;
   }
 
+  private _rebuildCard(
+    cardElToReplace: LovelaceCard,
+    config: LovelaceCardConfig
+  ): void {
+    const newCardEl = this._createCardElement(config);
+    if (cardElToReplace.parentElement) {
+      cardElToReplace.parentElement!.replaceChild(newCardEl, cardElToReplace);
+    }
+  }
+
   private async _renderCardElement(card: Card): Promise<TemplateResult> {
     let { type } = card;
     const { showElement, isCustom, name, description } = card;