Fix matter device actions (#22117)

* Fix matter device actions when matter integration loads forever

* Fix matter device-actions types path

* Move getMatterDeviceActions inside getDeviceActions in device page

src/panels/config/devices/device-detail/integration-elements/matter/device-actions.ts

@@ -17,6 +17,30 @@ import type { DeviceAction } from "../../../ha-config-device-page";
 import { showMatterManageFabricsDialog } from "../../../../integrations/integration-panels/matter/show-dialog-matter-manage-fabrics";
 import { navigate } from "../../../../../../common/navigate";
 
+export const getMatterDeviceDefaultActions = (
+  el: HTMLElement,
+  hass: HomeAssistant,
+  device: DeviceRegistryEntry
+): DeviceAction[] => {
+  if (device.via_device_id !== null) {
+    // only show device actions for top level nodes (so not bridged)
+    return [];
+  }
+
+  const actions: DeviceAction[] = [];
+
+  actions.push({
+    label: hass.localize("ui.panel.config.matter.device_actions.ping_device"),
+    icon: mdiChatQuestion,
+    action: () =>
+      showMatterPingNodeDialog(el, {
+        device_id: device.id,
+      }),
+  });
+
+  return actions;
+};
+
 export const getMatterDeviceActions = async (
   el: HTMLElement,
   hass: HomeAssistant,
@@ -75,14 +99,5 @@ export const getMatterDeviceActions = async (
     });
   }
 
-  actions.push({
-    label: hass.localize("ui.panel.config.matter.device_actions.ping_device"),
-    icon: mdiChatQuestion,
-    action: () =>
-      showMatterPingNodeDialog(el, {
-        device_id: device.id,
-      }),
-  });
-
   return actions;
 };

src/panels/config/devices/ha-config-device-page.ts

@@ -1119,12 +1119,17 @@ export class HaConfigDevicePage extends LitElement {
       const matter = await import(
         "./device-detail/integration-elements/matter/device-actions"
       );
-      const actions = await matter.getMatterDeviceActions(
+      const defaultActions = matter.getMatterDeviceDefaultActions(
         this,
         this.hass,
         device
       );
-      deviceActions.push(...actions);
+      deviceActions.push(...defaultActions);
+
+      // load matter device actions async to avoid an UI with 0 actions when the matter integration needs very long to get node diagnostics
+      matter.getMatterDeviceActions(this, this.hass, device).then((actions) => {
+        this._deviceActions = [...actions, ...(this._deviceActions || [])];
+      });
     }
 
     this._deviceActions = deviceActions;