refactor(iot-hub): fetch device package zip inside install dialog

Move the zip fetch from IotHubActionsService into TbDeviceInstallDialogComponent.ngOnInit so the dialog opens immediately and shows its own loading spinner instead of blocking the caller. Drops the now-unused fetchZipData helper and zipData field from DeviceInstallDialogData.

ui-ngx/src/app/modules/home/components/iot-hub/device-install-dialog/device-install-dialog.component.html

@@ -164,8 +164,8 @@
 
 <!-- Main dialog -->
 @if (loading) {
-  <div class="flex items-center justify-center py-12">
+  <div class="flex h-full items-center justify-center py-12">
-    <mat-spinner diameter="40"></mat-spinner>
+    <mat-spinner diameter="60"></mat-spinner>
   </div>
 } @else {
   <div class="tb-device-install-header flex items-center gap-3 py-2 pl-6 pr-2">

ui-ngx/src/app/modules/home/components/iot-hub/device-install-dialog/device-install-dialog.component.ts

@@ -53,10 +53,10 @@ import {
   InstallStepType,
   stepTypeAliasMap
 } from '@shared/models/iot-hub/device-package.models';
+import { mergeMap } from 'rxjs/operators';
 
 export interface DeviceInstallDialogData {
   item: MpItemVersionView;
-  zipData: ArrayBuffer;
   reviewMode?: boolean;
   selectedInstallMethod?: string;
   installState?: Record<string, any>;
@@ -138,8 +138,11 @@ export class TbDeviceInstallDialogComponent extends DialogComponent<TbDeviceInst
 
   async ngOnInit(): Promise<void> {
     try {
+      const zipData = await firstValueFrom(this.iotHubApiService.getVersionFileData(this.data.item.id, { ignoreLoading: true }).pipe(
+        mergeMap((blob: Blob) => blob.arrayBuffer())
+      ));
       const JSZip = (await import('jszip')).default;
-      const zip = await JSZip.loadAsync(this.data.zipData);
+      const zip = await JSZip.loadAsync(zipData);
       const imageExtensions = new Set(['png', 'jpg', 'jpeg', 'gif', 'svg']);
       for (const [path, entry] of Object.entries(zip.files) as [string, any][]) {
         if (!entry.dir) {

ui-ngx/src/app/modules/home/components/iot-hub/iot-hub-actions.service.ts

@@ -129,34 +129,24 @@ export class IotHubActionsService {
   }
 
   installDevice(item: MpItemVersionView): Observable<string> {
-    return this.fetchZipData(item).pipe(
+    return this.openDeviceInstallDialog(item);
-      mergeMap((zipData: ArrayBuffer) => this.openDeviceInstallDialog(item, zipData))
-    );
   }
 
   reviewDevice(item: MpItemVersionView, deviceDescriptor: DeviceInstalledItemDescriptor): Observable<any> {
-    return this.fetchZipData(item).pipe(
+    return this.openDeviceInstallDialog(item, {
-      mergeMap((zipData: ArrayBuffer) => this.openDeviceInstallDialog(item, zipData, {
         reviewMode: true,
         selectedInstallMethod: deviceDescriptor.selectedInstallMethod,
         installState: deviceDescriptor.installState
-      }))
+      });
-    );
-  }
-
-  private fetchZipData(item: MpItemVersionView): Observable<ArrayBuffer> {
-    return this.iotHubApiService.getVersionFileData(item.id as string, { ignoreLoading: true }).pipe(
-      mergeMap((blob: Blob) => blob.arrayBuffer())
-    );
   }
 
-  private openDeviceInstallDialog(item: MpItemVersionView, zipData: ArrayBuffer,
+  private openDeviceInstallDialog(item: MpItemVersionView,
                                   options?: { reviewMode?: boolean; selectedInstallMethod?: string; installState?: any }): Observable<any> {
-    return this.dialog.open(TbDeviceInstallDialogComponent, {
+    return this.dialog.open<TbDeviceInstallDialogComponent, DeviceInstallDialogData>(TbDeviceInstallDialogComponent, {
       panelClass: ['tb-dialog', 'tb-fullscreen-dialog-lt-md'],
       disableClose: true,
       autoFocus: false,
-      data: { item, zipData, ...options } as DeviceInstallDialogData
+      data: { item, ...options }
     }).afterClosed();
   }
 }