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" + > + +
- + +} 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, +};