feat(iot-hub): unify empty/loading state in installed-items table

- Replace the plain text empty placeholder with the same illustration +
  title + subtitle layout used by tb-iot-hub-empty-state in the browse
  component (no-data illustration, 18/500 title, 14/0.54 body).
- Add a no-installed-items-text locale key ("Try adjusting your search
  or filters.").
- Make the table wrapper a flex column and place the empty state and
  loading spinner inside it as flex-1 children so both vertically
  centre below the sticky header instead of pinning to the top.

ui-ngx/src/app/modules/home/components/iot-hub/iot-hub-installed-items-table.component.html

@@ -16,7 +16,7 @@
 
 -->
 <div class="tb-installed-table-container flex flex-1 flex-col overflow-hidden rounded-lg">
-  <div class="tb-installed-table-wrapper flex-1 overflow-auto">
+  <div class="tb-installed-table-wrapper flex flex-1 flex-col overflow-auto">
     <table mat-table [dataSource]="dataSource" matSort matSortActive="createdTime" matSortDirection="desc">
       <!-- Name -->
       <ng-container matColumnDef="itemName">
@@ -134,19 +134,21 @@
       <tr mat-header-row *matHeaderRowDef="displayedColumns; sticky: true"></tr>
       <tr mat-row *matRowDef="let _row; columns: displayedColumns;"></tr>
     </table>
-  </div>
 
-  @if (isLoading) {
-    <div class="flex justify-center py-12">
-      <mat-spinner diameter="40"></mat-spinner>
-    </div>
-  }
+    @if (isLoading) {
+      <div class="flex flex-1 items-center justify-center py-12">
+        <mat-spinner diameter="40"></mat-spinner>
+      </div>
+    }
 
-  @if (!isLoading && dataSource.length === 0) {
-    <div class="tb-installed-empty py-12 text-center text-sm">
-      {{ 'iot-hub.no-installed-items' | translate }}
-    </div>
-  }
+    @if (!isLoading && dataSource.length === 0) {
+      <div class="tb-iot-hub-empty-state flex flex-1 flex-col items-center justify-center py-20 text-center">
+        <div class="tb-no-data-bg"></div>
+        <h3>{{ 'iot-hub.no-installed-items' | translate }}</h3>
+        <p>{{ 'iot-hub.no-installed-items-text' | translate }}</p>
+      </div>
+    }
+  </div>
 
   <!-- Paginator inside border -->
   <mat-divider></mat-divider>

ui-ngx/src/app/modules/home/components/iot-hub/iot-hub-installed-items-table.component.scss

@@ -203,8 +203,25 @@
   }
 }
 
-.tb-installed-empty {
-  color: rgba(0, 0, 0, 0.54);
+// Empty state — mirrors the browse component's tb-iot-hub-empty-state
+.tb-iot-hub-empty-state {
+  .tb-no-data-bg {
+    flex: auto;
+    height: 100px;
+  }
+
+  h3 {
+    font-size: 18px;
+    font-weight: 500;
+    color: rgba(0, 0, 0, 0.87);
+    margin: 16px 0 8px;
+  }
+
+  p {
+    font-size: 14px;
+    color: rgba(0, 0, 0, 0.54);
+    margin: 0;
+  }
 }
 
 :host(:not(.tb-installed-with-version)) {

ui-ngx/src/assets/locale/locale.constant-en_US.json

@@ -3854,6 +3854,7 @@
         "item-version": "Version",
         "installed-date": "Installed",
         "no-installed-items": "No installed items found",
+        "no-installed-items-text": "Try adjusting your search or filters.",
         "remove-installed-item-title": "Remove Installed Item",
         "remove-installed-item-text": "Are you sure you want to remove '{{name}}'? The installed entity will also be removed.",
         "installed-item-removed": "'{{name}}' has been removed",