fix: add loaders on edit label resource and file upload

libs/vre/shared/app-resource-properties/src/lib/edit-resource-label-dialog.component.ts

@@ -5,7 +5,7 @@ import { KnoraApiConnection, ReadResource, UpdateResourceMetadata } from '@dasch
 import { DspApiConnectionToken } from '@dasch-swiss/vre/shared/app-config';
 import { ComponentCommunicationEventService, EmitEvent, Events } from '@dasch-swiss/vre/shared/app-helper-services';
 import { ResourceFetcherService } from '@dasch-swiss/vre/shared/app-representations';
-import { switchMap } from 'rxjs/operators';
+import { finalize, switchMap } from 'rxjs/operators';
 
 export interface EditResourceLabelDialogProps {
   resource: ReadResource;
@@ -21,12 +21,21 @@ export interface EditResourceLabelDialogProps {
 
     <div mat-dialog-actions align="end">
       <button mat-button mat-dialog-close>Cancel</button>
-      <button mat-raised-button color="primary" [disabled]="control.invalid" (click)="submit()">Submit</button>
+      <button
+        mat-raised-button
+        color="primary"
+        [disabled]="control.invalid"
+        appLoadingButton
+        [isLoading]="loading"
+        (click)="submit()">
+        Submit
+      </button>
     </div>`,
 })
 export class EditResourceLabelDialogComponent {
   control = new FormControl(this.data.resource.label, { validators: [Validators.required], nonNullable: true });
   initialValue = this.data.resource.label;
+  loading = false;
 
   constructor(
     @Inject(DspApiConnectionToken)
@@ -45,6 +54,8 @@ export class EditResourceLabelDialogComponent {
 
     if (this.control.invalid) return;
 
+    this.loading = true;
+
     const payload = new UpdateResourceMetadata();
     payload.id = this.data.resource.id;
     payload.type = this.data.resource.type;
@@ -55,6 +66,9 @@ export class EditResourceLabelDialogComponent {
         switchMap(res => {
           payload.lastModificationDate = (res as ReadResource).lastModificationDate;
           return this._dspApiConnection.v2.res.updateResourceMetadata(payload);
+        }),
+        finalize(() => {
+          this.loading = false;
         })
       )
       .subscribe(() => {

libs/vre/shared/app-resource-properties/src/lib/upload2.component.ts

@@ -6,34 +6,40 @@ import { NotificationService } from '@dasch-swiss/vre/shared/app-notification';
 import { UploadFileService } from '@dasch-swiss/vre/shared/app-representations';
 import { ProjectsSelectors } from '@dasch-swiss/vre/shared/app-state';
 import { Store } from '@ngxs/store';
-import { filter, map, mergeMap, take } from 'rxjs/operators';
+import { filter, finalize, map, mergeMap, take } from 'rxjs/operators';
 import { FileRepresentationType } from './file-representation.type';
 import { fileValueMapping } from './file-value-mapping';
 
 @Component({
   selector: 'app-upload-2',
   template: `
-    <div
-      *ngIf="ngControl.value === null; else showFileTemplate"
-      appDragDrop
-      (click)="fileInput.click()"
-      (fileDropped)="_addFile($event.item(0))"
-      style="cursor: pointer">
+    <ng-container *ngIf="!loading; else loadingTpl">
       <div
-        style="text-align: center;
+        *ngIf="ngControl.value === null; else showFileTemplate"
+        appDragDrop
+        (click)="fileInput.click()"
+        (fileDropped)="_addFile($event.item(0))"
+        style="cursor: pointer">
+        <div
+          style="text-align: center;
     padding: 16px; border: 1px solid black">
-        <input hidden type="file" (change)="addFileFromClick($event)" #fileInput />
-        <mat-icon style="transform: scale(1.6); margin: 8px 0;">cloud_upload</mat-icon>
-        <div>Upload file</div>
-        <div class="mat-subtitle-2">
-          The following file types are supported: <br />{{ allowedFileTypes.join(', ') }}
+          <input hidden type="file" (change)="addFileFromClick($event)" #fileInput />
+          <mat-icon style="transform: scale(1.6); margin: 8px 0;">cloud_upload</mat-icon>
+          <div>Upload file</div>
+          <div class="mat-subtitle-2">
+            The following file types are supported: <br />{{ allowedFileTypes.join(', ') }}
+          </div>
+        </div>
+        <div class="mat-subtitle-2" style="background: black; color: white; text-align: center; padding: 8px">
+          Drag and drop or click to upload
         </div>
       </div>
-      <div class="mat-subtitle-2" style="background: black; color: white; text-align: center; padding: 8px">
-        Drag and drop or click to upload
-      </div>
-    </div>
-    <mat-error *ngIf="ngControl.touched && ngControl.errors">{{ ngControl.errors | humanReadableError }}</mat-error>
+      <mat-error *ngIf="ngControl.touched && ngControl.errors">{{ ngControl.errors | humanReadableError }} </mat-error>
+    </ng-container>
+
+    <ng-template #loadingTpl>
+      <dasch-swiss-app-progress-indicator />
+    </ng-template>
 
     <ng-template #showFileTemplate>
       <div *ngIf="previewUrl" style="display: flex; justify-content: center">
@@ -69,6 +75,7 @@ export class Upload2Component implements ControlValueAccessor {
 
   previewUrl: SafeUrl | null = null;
   fileToUpload: File | undefined;
+  loading = false;
 
   onChange!: (value: any) => void;
   onTouched!: () => void;
@@ -121,13 +128,18 @@ export class Upload2Component implements ControlValueAccessor {
   }
 
   private _uploadFile(file: File): void {
+    this.loading = true;
     this._store
       .select(ProjectsSelectors.currentProject)
       .pipe(
         filter(v => v !== undefined),
         take(1),
         map(prj => prj!.shortcode),
-        mergeMap(sc => this._upload.upload(file, sc))
+        mergeMap(sc => this._upload.upload(file, sc)),
+        finalize(() => {
+          this.loading = false;
+          this._cdr.detectChanges();
+        })
       )
       .subscribe(res => {
         switch (this.representation) {