diff --git a/src/app/core/import/import-review-data/import-review-data.component.html b/src/app/core/import/import-review-data/import-review-data.component.html
index 7d4abe387a..72cbe675be 100644
--- a/src/app/core/import/import-review-data/import-review-data.component.html
+++ b/src/app/core/import/import-review-data/import-review-data.component.html
@@ -1,25 +1,31 @@
-
-
Review your mapped data to be imported:
+@if (isLoading) {
+
+
Preparing data for preview and import ...
+
+
+} @else {
+
+
Review your mapped data to be imported:
-
+
-
-
-
+ i18n-text="import - review data - help text"
+ >
+
+
- 0"
- [entityType]="entityConstructor"
- [customColumns]="displayColumns"
- [columnsToDisplay]="displayColumns"
- [records]="mappedEntities"
- clickMode="none"
- [editable]="false"
-/>
+
+}
diff --git a/src/app/core/import/import-review-data/import-review-data.component.ts b/src/app/core/import/import-review-data/import-review-data.component.ts
index 1d39f5f9a8..ace506bd30 100644
--- a/src/app/core/import/import-review-data/import-review-data.component.ts
+++ b/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();
+ 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() {
diff --git a/src/app/core/import/import-review-data/import-review-data.stories.ts b/src/app/core/import/import-review-data/import-review-data.stories.ts
index f73ac001f5..661aa51691 100644
--- a/src/app/core/import/import-review-data/import-review-data.stories.ts
+++ b/src/app/core/import/import-review-data/import-review-data.stories.ts
@@ -23,9 +23,14 @@ const Template: StoryFn = (
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,
+};