From a099e65a9d980c8dd687c7eb2eacfa220cc827c9 Mon Sep 17 00:00:00 2001
From: ildar170975 <71872483+ildar170975@users.noreply.github.com>
Date: Sat, 31 May 2025 10:45:58 +0300
Subject: [PATCH] Fix "unavailable" state in Area card (#25063)

* fix "unavailable" state

* Show "-" for unavailable/undefined
---
 src/panels/lovelace/cards/hui-area-card.ts | 17 +++++++++++------
 1 file changed, 11 insertions(+), 6 deletions(-)

diff --git a/src/panels/lovelace/cards/hui-area-card.ts b/src/panels/lovelace/cards/hui-area-card.ts
index 44c60b6fce..0b390386b0 100644
--- a/src/panels/lovelace/cards/hui-area-card.ts
+++ b/src/panels/lovelace/cards/hui-area-card.ts
@@ -384,15 +384,22 @@ export class HuiAreaCard
             areaSensorEntityId = area.humidity_entity_id;
             break;
         }
-        const areaEntity = areaSensorEntityId
-          ? this.hass.states[areaSensorEntityId]
-          : undefined;
+        const areaEntity =
+          areaSensorEntityId &&
+          this.hass.states[areaSensorEntityId] &&
+          !isUnavailableState(this.hass.states[areaSensorEntityId].state)
+            ? this.hass.states[areaSensorEntityId]
+            : undefined;
         if (
           areaEntity ||
           entitiesByDomain[domain].some(
             (entity) => entity.attributes.device_class === deviceClass
           )
         ) {
+          let value = areaEntity
+            ? this.hass.formatEntityState(areaEntity)
+            : this._average(domain, deviceClass);
+          if (!value) value = "—";
           sensors.push(html`
             <div class="sensor">
               <ha-domain-icon
@@ -400,9 +407,7 @@ export class HuiAreaCard
                 .domain=${domain}
                 .deviceClass=${deviceClass}
               ></ha-domain-icon>
-              ${areaEntity
-                ? this.hass.formatEntityState(areaEntity)
-                : this._average(domain, deviceClass)}
+              ${value}
             </div>
           `);
         }