Add loading state to area strategy (#24803)

src/panels/lovelace/strategies/areas/areas-dashboard-strategy.ts

@@ -1,13 +1,14 @@
+import { STATE_NOT_RUNNING } from "home-assistant-js-websocket";
 import { ReactiveElement } from "lit";
 import { customElement } from "lit/decorators";
 import type { LovelaceConfig } from "../../../../data/lovelace/config/types";
 import type { LovelaceViewRawConfig } from "../../../../data/lovelace/config/view";
 import type { HomeAssistant } from "../../../../types";
+import type { LovelaceStrategyEditor } from "../types";
 import type {
   AreaViewStrategyConfig,
   EntitiesDisplay,
 } from "./area-view-strategy";
-import type { LovelaceStrategyEditor } from "../types";
 import type { AreasViewStrategyConfig } from "./areas-overview-view-strategy";
 import { computeAreaPath, getAreas } from "./helpers/areas-strategy-helper";
 
@@ -30,6 +31,28 @@ export class AreasDashboardStrategy extends ReactiveElement {
     config: AreasDashboardStrategyConfig,
     hass: HomeAssistant
   ): Promise<LovelaceConfig> {
+    if (hass.config.state === STATE_NOT_RUNNING) {
+      return {
+        views: [
+          {
+            type: "sections",
+            sections: [{ cards: [{ type: "starting" }] }],
+          },
+        ],
+      };
+    }
+
+    if (hass.config.recovery_mode) {
+      return {
+        views: [
+          {
+            type: "sections",
+            sections: [{ cards: [{ type: "recovery-mode" }] }],
+          },
+        ],
+      };
+    }
+
     const areas = getAreas(
       hass.areas,
       config.areas_display?.hidden,