fix(import): show loading indicator while preparing preview (#2435)

closes #2429

src/app/core/import/import-review-data/import-review-data.component.html

@@ -1,25 +1,31 @@
-<div class="flex-row gap-regular align-center">
-  <span class="flex-grow" i18n>Review your mapped data to be imported:</span>
+@if (isLoading) {
+  <div>
+    <div i18n>Preparing data for preview and import ...</div>
+    <mat-progress-bar mode="indeterminate"></mat-progress-bar>
+  </div>
+} @else {
+  <div class="flex-row gap-regular align-center">
+    <span class="flex-grow" i18n>Review your mapped data to be imported:</span>
 
-  <button (click)="startImport()" mat-raised-button color="accent" i18n>
-    Start Import
-  </button>
+    <button (click)="startImport()" mat-raised-button color="accent" i18n>
+      Start Import
+    </button>
 
-  <app-help-button
-    text="The data previewed here is mapped and transformed according to the 'Column Mapping' you defined in the previous step.
+    <app-help-button
+      text="The data previewed here is mapped and transformed according to the 'Column Mapping' you defined in the previous step.
         Only columns for which you selected a field there will be imported and appears here in this preview.
         If necessary, you can go back to the previous step and make changes to the mapping."
-    i18n-text="import - review data - help text"
-  >
-  </app-help-button>
-</div>
+      i18n-text="import - review data - help text"
+    >
+    </app-help-button>
+  </div>
 
-<app-entities-table
-  *ngIf="mappedEntities.length > 0"
-  [entityType]="entityConstructor"
-  [customColumns]="displayColumns"
-  [columnsToDisplay]="displayColumns"
-  [records]="mappedEntities"
-  clickMode="none"
-  [editable]="false"
-/>
+  <app-entities-table
+    [entityType]="entityConstructor"
+    [customColumns]="displayColumns"
+    [columnsToDisplay]="displayColumns"
+    [records]="mappedEntities"
+    clickMode="none"
+    [editable]="false"
+  />
+}

src/app/core/import/import-review-data/import-review-data.component.ts

@@ -19,16 +19,21 @@ import { ImportMetadata } from "../import-metadata";
 import { AdditionalImportAction } from "../import-additional-actions/additional-import-action";
 import { MatButtonModule } from "@angular/material/button";
 import { HelpButtonComponent } from "../../common-components/help-button/help-button.component";
-import { NgIf } from "@angular/common";
 import { EntitiesTableComponent } from "../../common-components/entities-table/entities-table.component";
 import { EntityRegistry } from "../../entity/database-entity.decorator";
+import { MatProgressBar } from "@angular/material/progress-bar";
 
 @Component({
   selector: "app-import-review-data",
   templateUrl: "./import-review-data.component.html",
   styleUrls: ["./import-review-data.component.scss"],
   standalone: true,
-  imports: [MatButtonModule, HelpButtonComponent, EntitiesTableComponent, NgIf],
+  imports: [
+    MatButtonModule,
+    HelpButtonComponent,
+    EntitiesTableComponent,
+    MatProgressBar,
+  ],
 })
 export class ImportReviewDataComponent implements OnChanges {
   @Input() rawData: any[];
@@ -39,6 +44,7 @@ export class ImportReviewDataComponent implements OnChanges {
 
   @Output() importComplete = new EventEmitter<ImportMetadata>();
 
+  isLoading: boolean;
   mappedEntities: Entity[] = [];
   displayColumns: string[] = [];
 
@@ -56,6 +62,7 @@ export class ImportReviewDataComponent implements OnChanges {
   }
 
   private async parseRawData() {
+    this.isLoading = true;
     this.mappedEntities = await this.importService.transformRawDataToEntities(
       this.rawData,
       this.entityType,
@@ -65,6 +72,8 @@ export class ImportReviewDataComponent implements OnChanges {
     this.displayColumns = this.columnMapping
       .filter(({ propertyName }) => !!propertyName)
       .map(({ propertyName }) => propertyName);
+
+    this.isLoading = false;
   }
 
   async startImport() {

src/app/core/import/import-review-data/import-review-data.stories.ts

@@ -23,9 +23,14 @@ const Template: StoryFn<ImportReviewDataComponent> = (
   props: args,
 });
 
-export const Basic = Template.bind({});
-Basic.args = {
+export const Preview = Template.bind({});
+Preview.args = {
   rawData: IMPORT_SAMPLE_RAW_DATA,
   entityType: "Child",
   columnMapping: IMPORT_SAMPLE_COLUMN_MAPPING,
 };
+
+export const Loading = Template.bind({});
+Loading.args = {
+  isLoading: true,
+};