Download export should show loading indicator

src/app/core/export/export-dialog/export-dialog.component.html

@@ -3,6 +3,10 @@ <h1 mat-dialog-title i18n="Export dialog title">
   <app-dialog-close mat-dialog-close></app-dialog-close>
 </h1>
 
+@if (isLoading()) {
+  <mat-progress-bar mode="indeterminate"></mat-progress-bar>
+}
+
 <div mat-dialog-content>
   <p i18n="Export dialog format label">Format</p>
   <mat-radio-group
@@ -36,17 +40,27 @@ <h1 mat-dialog-title i18n="Export dialog title">
   }
 </div>
 
+@if (downloadError()) {
+  <mat-error class="margin-left-regular">{{ downloadError() }}</mat-error>
+}
+
 <div mat-dialog-actions>
   <button
     mat-raised-button
     color="accent"
+    [disabled]="isLoading()"
     (click)="download()"
     i18n="Download button"
   >
     Download
   </button>
 
-  <button mat-stroked-button mat-dialog-close i18n="Cancel button">
+  <button
+    mat-stroked-button
+    mat-dialog-close
+    [disabled]="isLoading()"
+    i18n="Cancel button"
+  >
     Cancel
   </button>
 </div>

src/app/core/export/export-dialog/export-dialog.component.ts

@@ -10,8 +10,11 @@ import {
   MatDialogRef,
 } from "@angular/material/dialog";
 import { MatButtonModule } from "@angular/material/button";
+import { MatFormFieldModule } from "@angular/material/form-field";
+import { MatProgressBarModule } from "@angular/material/progress-bar";
 import { MatRadioModule } from "@angular/material/radio";
 import { FormsModule } from "@angular/forms";
+import { Logging } from "../../logging/logging.service";
 import { DialogCloseComponent } from "../../common-components/dialog-close/dialog-close.component";
 import {
   DownloadService,
@@ -41,6 +44,8 @@ export interface ExportDialogData {
   imports: [
     MatDialogModule,
     MatButtonModule,
+    MatFormFieldModule,
+    MatProgressBarModule,
     MatRadioModule,
     FormsModule,
     DialogCloseComponent,
@@ -54,18 +59,32 @@ export class ExportDialogComponent {
 
   format = signal<FileDownloadFormat>("csv");
   scope = signal<"filtered" | "all">("filtered");
+  isLoading = signal<boolean>(false);
+  downloadError = signal<string | null>(null);
 
   async download() {
-    const exportData =
-      this.data.filteredData && this.scope() === "filtered"
-        ? this.data.filteredData
-        : this.data.allEntities;
-    await this.downloadService.triggerDownload(
-      exportData,
-      this.format(),
-      this.data.filename,
-      this.data.exportConfig,
-    );
-    this.dialogRef.close();
+    this.isLoading.set(true);
+    this.downloadError.set(null);
+    await new Promise<void>((resolve) => setTimeout(resolve));
+    try {
+      const exportData =
+        this.data.filteredData && this.scope() === "filtered"
+          ? this.data.filteredData
+          : this.data.allEntities;
+      await this.downloadService.triggerDownload(
+        exportData,
+        this.format(),
+        this.data.filename,
+        this.data.exportConfig,
+      );
+      this.dialogRef.close();
+    } catch (e) {
+      Logging.warn("Export download failed:", e);
+      this.downloadError.set(
+        $localize`Download failed [${e instanceof Error ? e.message : String(e)}]`,
+      );
+    } finally {
+      this.isLoading.set(false);
+    }
   }
 }

src/app/core/export/query.service.ts

@@ -280,7 +280,7 @@ export class QueryService {
 
     return ids
       .filter((id) => {
-        if (typeof id !== "string") {
+        if (typeof id !== "string" || !id) {
           console.debug("invalid entity id in Query :toEntities", id);
           return false;
         }