Add the "add all device entities to Lovelace" functionality to ZHA device card (#4521)

* fix race condition

* add all entities

src/panels/config/zha/zha-device-card.ts

@@ -42,6 +42,7 @@ import { navigate } from "../../../common/navigate";
 import { UnsubscribeFunc, HassEvent } from "home-assistant-js-websocket";
 import { formatAsPaddedHex } from "./functions";
 import { computeStateName } from "../../../common/entity/compute_state_name";
+import { addEntitiesToLovelaceView } from "../../lovelace/editor/add-entities-to-view";
 
 declare global {
   // for fire event
@@ -109,9 +110,6 @@ class ZHADeviceCard extends LitElement {
     this.addEventListener("hass-service-called", (ev) =>
       this.serviceCalled(ev)
     );
-    this._serviceData = {
-      ieee_address: this.device!.ieee,
-    };
   }
 
   protected updated(changedProperties: PropertyValues): void {
@@ -125,6 +123,9 @@ class ZHADeviceCard extends LitElement {
           ) + 1;
       }
       this._userGivenName = this.device!.user_given_name;
+      this._serviceData = {
+        ieee_address: this.device!.ieee,
+      };
     }
     super.update(changedProperties);
   }
@@ -223,6 +224,13 @@ class ZHADeviceCard extends LitElement {
             `
           )}
         </div>
+        <div class="card-actions">
+          <mwc-button @click=${this._addToLovelaceView}>
+            ${this.hass.localize(
+              "ui.panel.config.devices.entities.add_entities_lovelace"
+            )}
+          </mwc-button>
+        </div>
         ${
           this.showEditableInfo
             ? html`
@@ -396,6 +404,14 @@ class ZHADeviceCard extends LitElement {
     navigate(this, "/config/zha/add/" + this.device!.ieee);
   }
 
+  private _addToLovelaceView(): void {
+    addEntitiesToLovelaceView(
+      this,
+      this.hass,
+      this.device!.entities.map((entity) => entity.entity_id)
+    );
+  }
+
   static get styles(): CSSResult[] {
     return [
       haStyle,

src/panels/config/zha/zha-node.ts

@@ -56,6 +56,8 @@ export class ZHANode extends LitElement {
           )}
         </span>
         <div class="content">
+          ${this.device
+            ? html`
                 <zha-device-card
                   class="card"
                   .hass=${this.hass}
@@ -67,6 +69,13 @@ export class ZHANode extends LitElement {
                   .showEntityDetail=${false}
                   @zha-device-removed=${this._onDeviceRemoved}
                 ></zha-device-card>
+              `
+            : html`
+                <paper-spinner
+                  active
+                  alt=${this.hass!.localize("ui.common.loading")}
+                ></paper-spinner>
+              `}
         </div>
       </ha-config-section>
     `;