From 71182fea387733d26ce0a3b9650e2b4df56e5588 Mon Sep 17 00:00:00 2001
From: Igor Kulikov <ikulikov@thingsboard.io>
Date: Fri, 12 Jun 2026 18:35:13 +0300
Subject: [PATCH] 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.
---
 .../device-install-dialog.component.html      |  4 ++--
 .../device-install-dialog.component.ts        |  7 ++++--
 .../iot-hub/iot-hub-actions.service.ts        | 22 +++++--------------
 3 files changed, 13 insertions(+), 20 deletions(-)

diff --git a/ui-ngx/src/app/modules/home/components/iot-hub/device-install-dialog/device-install-dialog.component.html b/ui-ngx/src/app/modules/home/components/iot-hub/device-install-dialog/device-install-dialog.component.html
index 733ed0a906..402381ad67 100644
--- a/ui-ngx/src/app/modules/home/components/iot-hub/device-install-dialog/device-install-dialog.component.html
+++ b/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">
-    <mat-spinner diameter="40"></mat-spinner>
+  <div class="flex h-full items-center justify-center py-12">
+    <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">
diff --git a/ui-ngx/src/app/modules/home/components/iot-hub/device-install-dialog/device-install-dialog.component.ts b/ui-ngx/src/app/modules/home/components/iot-hub/device-install-dialog/device-install-dialog.component.ts
index 53dc3ac523..e4df929fd2 100644
--- a/ui-ngx/src/app/modules/home/components/iot-hub/device-install-dialog/device-install-dialog.component.ts
+++ b/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) {
diff --git a/ui-ngx/src/app/modules/home/components/iot-hub/iot-hub-actions.service.ts b/ui-ngx/src/app/modules/home/components/iot-hub/iot-hub-actions.service.ts
index 4fd1565c07..bae080a464 100644
--- a/ui-ngx/src/app/modules/home/components/iot-hub/iot-hub-actions.service.ts
+++ b/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(
-      mergeMap((zipData: ArrayBuffer) => this.openDeviceInstallDialog(item, zipData))
-    );
+    return this.openDeviceInstallDialog(item);
   }
 
   reviewDevice(item: MpItemVersionView, deviceDescriptor: DeviceInstalledItemDescriptor): Observable<any> {
-    return this.fetchZipData(item).pipe(
-      mergeMap((zipData: ArrayBuffer) => this.openDeviceInstallDialog(item, zipData, {
+    return this.openDeviceInstallDialog(item, {
         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();
   }
 }