114599: Added loading animation after creating collection or community

atmire · Apr 23, 2024 · 3922e73 · 3922e73
1 parent 6d582cd
commit 3922e73
Show file tree

Hide file tree

Showing 5 changed files with 32 additions and 11 deletions.
diff --git a/src/app/collection-page/create-collection-page/create-collection-page.component.html b/src/app/collection-page/create-collection-page/create-collection-page.component.html
@@ -1,10 +1,15 @@
-<div class="container">
-    <div class="row">
-        <div class="col-12 pb-4">
-            <h2 id="sub-header" class="border-bottom pb-2">{{'collection.create.sub-head' | translate:{ parent: dsoNameService.getName((parentRD$| async)?.payload) } }}</h2>
-        </div>
+<div class="container" *ngIf="(isLoading$ | async) === false">
+  <div class="row">
+    <div class="col-12 pb-4">
+      <h2 id="sub-header"
+          class="border-bottom pb-2">{{ 'collection.create.sub-head' | translate:{ parent: dsoNameService.getName((parentRD$| async)?.payload) } }}</h2>
     </div>
-    <ds-collection-form (submitForm)="onSubmit($event)"
-                        (back)="navigateToHome()"
-                        (finish)="navigateToNewPage()"></ds-collection-form>
+  </div>
+  <ds-collection-form (submitForm)="onSubmit($event)"
+                      (back)="navigateToHome()"
+                      (finish)="navigateToNewPage()"></ds-collection-form>
+</div>
+
+<div class="container">
+  <ds-themed-loading *ngIf="isLoading$ | async"></ds-themed-loading>
 </div>
diff --git a/src/app/collection-page/create-collection-page/create-collection-page.component.ts b/src/app/collection-page/create-collection-page/create-collection-page.component.ts
@@ -15,6 +15,7 @@ import { Collection } from '../../core/shared/collection.model';
 import { CreateComColPageComponent } from '../../shared/comcol/comcol-forms/create-comcol-page/create-comcol-page.component';
 import { NotificationsService } from '../../shared/notifications/notifications.service';
 import { CollectionFormComponent } from '../collection-form/collection-form.component';
+import { ThemedLoadingComponent } from '../../shared/loading/themed-loading.component';
 
 /**
  * Component that represents the page where a user can create a new Collection
@@ -27,6 +28,7 @@ import { CollectionFormComponent } from '../collection-form/collection-form.comp
     CollectionFormComponent,
     TranslateModule,
     AsyncPipe,
+    ThemedLoadingComponent,
   ],
   standalone: true,
 })

diff --git a/src/app/community-page/create-community-page/create-community-page.component.html b/src/app/community-page/create-community-page/create-community-page.component.html
@@ -1,13 +1,18 @@
-<div class="container">
+<div class="container" *ngIf="(isLoading$ | async) === false">
   <div class="row">
     <div class="col-12 pb-4">
       <ng-container *ngVar="(parentRD$ | async)?.payload as parent">
         <h2 *ngIf="!parent" id="header" class="border-bottom pb-2">{{ 'community.create.head' | translate }}</h2>
-        <h2 *ngIf="parent" id="sub-header" class="border-bottom pb-2">{{ 'community.create.sub-head' | translate:{ parent: dsoNameService.getName(parent) } }}</h2>
+        <h2 *ngIf="parent" id="sub-header"
+            class="border-bottom pb-2">{{ 'community.create.sub-head' | translate:{ parent: dsoNameService.getName(parent) } }}</h2>
       </ng-container>
     </div>
   </div>
   <ds-community-form (submitForm)="onSubmit($event)"
                      (back)="navigateToHome()"
                      (finish)="navigateToNewPage()"></ds-community-form>
 </div>
+
+<div class="container">
+  <ds-themed-loading *ngIf="isLoading$ | async"></ds-themed-loading>
+</div>
diff --git a/src/app/community-page/create-community-page/create-community-page.component.ts b/src/app/community-page/create-community-page/create-community-page.component.ts
@@ -18,6 +18,7 @@ import { CreateComColPageComponent } from '../../shared/comcol/comcol-forms/crea
 import { NotificationsService } from '../../shared/notifications/notifications.service';
 import { VarDirective } from '../../shared/utils/var.directive';
 import { CommunityFormComponent } from '../community-form/community-form.component';
+import { ThemedLoadingComponent } from '../../shared/loading/themed-loading.component';
 
 /**
  * Component that represents the page where a user can create a new Community
@@ -32,6 +33,7 @@ import { CommunityFormComponent } from '../community-form/community-form.compone
     VarDirective,
     NgIf,
     AsyncPipe,
+    ThemedLoadingComponent,
   ],
   standalone: true,
 })

diff --git a/src/app/shared/comcol/comcol-forms/create-comcol-page/create-comcol-page.component.ts b/src/app/shared/comcol/comcol-forms/create-comcol-page/create-comcol-page.component.ts
@@ -4,7 +4,7 @@ import {
 } from '@angular/core';
 import { Router } from '@angular/router';
 import { TranslateService } from '@ngx-translate/core';
-import { Observable } from 'rxjs';
+import { BehaviorSubject, Observable } from 'rxjs';
 import {
   mergeMap,
   take,
@@ -62,6 +62,11 @@ export class CreateComColPageComponent<TDomain extends Collection | Community> i
    */
   protected type: ResourceType;
 
+  /**
+   * The
+   */
+  isLoading$: BehaviorSubject<boolean> = new BehaviorSubject<boolean>(false);
+
   public constructor(
     protected dsoDataService: ComColDataService<TDomain>,
     public dsoNameService: DSONameService,
@@ -89,6 +94,7 @@ export class CreateComColPageComponent<TDomain extends Collection | Community> i
    * @param event   The event returned by the community/collection form. Contains the new dso and logo uploader
    */
   onSubmit(event) {
+    this.isLoading$.next(true);
     const dso = event.dso;
     const uploader = event.uploader;
 
@@ -101,6 +107,7 @@ export class CreateComColPageComponent<TDomain extends Collection | Community> i
           );
       }))
       .subscribe((dsoRD: TDomain) => {
+        this.isLoading$.next(false);
         if (isNotUndefined(dsoRD)) {
           this.newUUID = dsoRD.uuid;
           if (uploader.queue.length > 0) {