Add loading indicator to add new board modal

frontend/src/app/modules/boards/new-board-modal/new-board-modal.component.ts

@@ -36,6 +36,8 @@ import {StateService} from "@uirouter/core";
 import {BoardService} from "core-app/modules/boards/board/board.service";
 import {BoardCacheService} from "core-app/modules/boards/board/board-cache.service";
 import {BoardActionsRegistryService} from "core-app/modules/boards/board/board-actions/board-actions-registry.service";
+import {LoadingIndicatorService} from "core-app/modules/common/loading-indicator/loading-indicator.service";
+import {WorkPackageNotificationService} from "core-components/wp-edit/wp-notification.service";
 
 @Component({
   templateUrl: './new-board-modal.html'
@@ -49,6 +51,8 @@ export class NewBoardModalComponent extends OpModalComponent {
 
   public available = this.boardActions.available();
 
+  public inFlight = false;
+
   public text:any = {
     title: this.I18n.t('js.boards.new_board'),
     button_continue: this.I18n.t('js.button_continue'),
@@ -72,6 +76,8 @@ export class NewBoardModalComponent extends OpModalComponent {
               readonly boardService:BoardService,
               readonly boardActions:BoardActionsRegistryService,
               readonly boardCache:BoardCacheService,
+              readonly wpNotifications:WorkPackageNotificationService,
+              readonly loadingIndicatorService:LoadingIndicatorService,
               readonly I18n:I18nService) {
 
     super(locals, cdRef, elementRef);
@@ -86,12 +92,19 @@ export class NewBoardModalComponent extends OpModalComponent {
   }
 
   private create(params:{ type:BoardType, attribute?:string }) {
-    this.boardService
+    this.inFlight = true;
+
+    this.loadingIndicatorService.modal.promise = this.boardService
       .create(params)
       .then((board) => {
+        this.inFlight = false;
         this.closeMe();
         this.boardCache.update(board);
         this.state.go('boards.show', { board_id: board.id, isNew: true });
+      })
+      .catch((error:unknown) => {
+        this.inFlight = false;
+        this.wpNotifications.handleRawError(error);
       });
   }
 }

frontend/src/app/modules/boards/new-board-modal/new-board-modal.html

@@ -18,7 +18,9 @@
         <h3 [textContent]="text.free_board"></h3>
         <p [textContent]="text.free_board_text"></p>
 
-        <button class="button" (accessibleClick)="createFree()">
+        <button class="button"
+                [disabled]="inFlight"
+                (accessibleClick)="createFree()">
           <op-icon icon-classes="icon4 icon-add"></op-icon>
           <span [textContent]="text.free_board"></span>
         </button>
@@ -40,7 +42,9 @@
           </div>
         </div>
 
-        <button class="button" (accessibleClick)="createAction()">
+        <button class="button"
+                [disabled]="inFlight"
+                (accessibleClick)="createAction()">
           <op-icon icon-classes="icon4 icon-add"></op-icon>
           <span [textContent]="text.action_board"></span>
         </button>