From 46aeb82fd77073946d1f80c3b5b0fad2dcbde3c7 Mon Sep 17 00:00:00 2001
From: Daniel Chua <53444908+DCH25@users.noreply.github.com>
Date: Wed, 12 Apr 2023 10:45:45 -0400
Subject: [PATCH 1/4] feat: [513] added loading state to async button

---
 backend/src/api/boards.ts                     |   2 +-
 .../configuration-modal.component.html        |   6 +-
 .../configuration-modal.component.ts          | 232 ++++++++++++------
 frontend/src/app/services/board.service.ts    |   2 +-
 frontend/src/styles.scss                      |  20 ++
 5 files changed, 184 insertions(+), 78 deletions(-)

diff --git a/backend/src/api/boards.ts b/backend/src/api/boards.ts
index 50998db6..ccd8b2fd 100644
--- a/backend/src/api/boards.ts
+++ b/backend/src/api/boards.ts
@@ -98,7 +98,7 @@ router.post('/:boardID/copy-configuration', async (req, res) => {
   );
 
   await dalBoard.updateMany(boards, updatedBoard);
-  res.status(200);
+  res.status(200).json(boards);
 });
 
 router.get('/:id', async (req, res) => {
diff --git a/frontend/src/app/components/configuration-modal/configuration-modal.component.html b/frontend/src/app/components/configuration-modal/configuration-modal.component.html
index 1acab3dd..469d033b 100644
--- a/frontend/src/app/components/configuration-modal/configuration-modal.component.html
+++ b/frontend/src/app/components/configuration-modal/configuration-modal.component.html
@@ -239,7 +239,8 @@ <h2>UI Elements</h2>
       </mat-form-field>
       <button
         mat-button
-        [disabled]="newTagText.length < 1"
+        [class.spinner]="loading"
+        [disabled]="newTagText.length < 1 || loading"
         color="primary"
         (click)="addTag()"
       >
@@ -261,10 +262,11 @@ <h2>UI Elements</h2>
   <button
     mat-button
     (click)="handleDialogSubmit()"
+    [class.spinner]="loading"
     [disabled]="
       (taskMessage && !taskTitle.trim()) ||
       (taskTitle && !taskTitle.trim()) ||
-      boardNameInput.invalid
+      boardNameInput.invalid || loading
     "
     cdkFocusInitial
   >
diff --git a/frontend/src/app/components/configuration-modal/configuration-modal.component.ts b/frontend/src/app/components/configuration-modal/configuration-modal.component.ts
index ea705d19..d7a9cef5 100644
--- a/frontend/src/app/components/configuration-modal/configuration-modal.component.ts
+++ b/frontend/src/app/components/configuration-modal/configuration-modal.component.ts
@@ -1,10 +1,9 @@
-import { Component, Inject } from '@angular/core';
+import { Component, Inject, OnDestroy } from '@angular/core';
 import {
   MatDialog,
   MatDialogRef,
   MAT_DIALOG_DATA,
 } from '@angular/material/dialog';
-import { PostType } from '../../models/post';
 import { BoardService } from 'src/app/services/board.service';
 import { PostService } from '../../services/post.service';
 import { UserService } from 'src/app/services/user.service';
@@ -19,18 +18,19 @@ import {
 import { CanvasService } from 'src/app/services/canvas.service';
 import { Project } from 'src/app/models/project';
 import { Board, BoardScope, BoardPermissions } from 'src/app/models/board';
-import { generateUniqueID } from 'src/app/utils/Utils';
+import { generateUniqueID, getErrorMessage } from 'src/app/utils/Utils';
 import { Router } from '@angular/router';
 import { ConfirmModalComponent } from '../confirm-modal/confirm-modal.component';
 import { ImageSettings } from 'src/app/utils/FabricUtils';
 import { SocketService } from 'src/app/services/socket.service';
+import { SnackbarService } from 'src/app/services/snackbar.service';
 
 @Component({
   selector: 'app-configuration-modal',
   templateUrl: './configuration-modal.component.html',
   styleUrls: ['./configuration-modal.component.scss'],
 })
-export class ConfigurationModalComponent {
+export class ConfigurationModalComponent implements OnDestroy {
   readonly tagDefaultColor = TAG_DEFAULT_COLOR;
 
   project: Project;
@@ -68,6 +68,8 @@ export class ConfigurationModalComponent {
 
   members: string[] = [];
 
+  loading: boolean = false;
+
   constructor(
     public dialogRef: MatDialogRef<ConfigurationModalComponent>,
     public dialog: MatDialog,
@@ -78,7 +80,8 @@ export class ConfigurationModalComponent {
     public canvasService: CanvasService,
     public fileUploadService: FileUploadService,
     public socketService: SocketService,
-    private router: Router,
+    private _snackbarService: SnackbarService,
+    private _router: Router,
     @Inject(MAT_DIALOG_DATA) public data: any
   ) {
     this.project = data.project;
@@ -103,7 +106,7 @@ export class ConfigurationModalComponent {
     );
   }
 
-  async addTag() {
+  addTag(): void {
     this.tagsChanged = true;
     this.tags.push({
       tagID: generateUniqueID(),
@@ -111,17 +114,49 @@ export class ConfigurationModalComponent {
       name: this.newTagText,
       color: this.newTagColor,
     });
-    await this.boardService.update(this.boardID, { tags: this.tags });
+
+    this.loading = true;
+    this.boardService
+      .update(this.boardID, { tags: this.tags })
+      .then((board) => {
+        this._snackbarService.queueSnackbar(
+          `Sucessfully added tag to Board: ${board.name}`
+        );
+      })
+      .catch((error) => {
+        const errorMsg = getErrorMessage(error);
+        console.error(errorMsg);
+        this._snackbarService.queueSnackbar(
+          'A problem occured while adding a tag. Please try again',
+          `Error: ${errorMsg}`
+        );
+      })
+      .finally(() => (this.loading = false));
     this.newTagText = '';
   }
 
-  async removeTag(tagRemove) {
+  removeTag(tagRemove: Tag): void {
     this.tagsChanged = true;
     this.tags = this.tags.filter((tag) => tag != tagRemove);
-    await this.boardService.update(this.boardID, { tags: this.tags });
+
+    this.boardService
+      .update(this.boardID, { tags: this.tags })
+      .then((board) => {
+        this._snackbarService.queueSnackbar(
+          `Sucessfully removed tag from Board: ${board.name}`
+        );
+      })
+      .catch((error) => {
+        const errorMsg = getErrorMessage(error);
+        console.error(errorMsg);
+        this._snackbarService.queueSnackbar(
+          'A problem occured while removing a tag. Please try again',
+          `Error: ${errorMsg}`
+        );
+      });
   }
 
-  compressFile() {
+  compressFile(): void {
     this.fileUploadService.compressFile().then(async (compressedImage) => {
       this.newCompressedImage = compressedImage;
 
@@ -142,64 +177,96 @@ export class ConfigurationModalComponent {
     });
   }
 
-  async updateBoardImageSettings(): Promise<Board> {
+  updateBoardImageSettings(): Promise<Board> {
     this.bgImgSettings.top = this.backgroundPosY;
     this.bgImgSettings.left = this.backgroundPosX;
     this.bgImgSettings.scaleX = this.backgroundScale / 100;
     this.bgImgSettings.scaleY = this.backgroundScale / 100;
 
-    const board: Board = await this.canvasService.updateBoardImageSettings(
+    return this.canvasService.updateBoardImageSettings(
       this.boardID,
       this.bgImgSettings
     );
-    return board;
   }
 
-  async removeImage() {
+  removeImage(): void {
     this.currentBgImage = null;
-    const board = await this.canvasService.updateBoardImage(this.boardID, null);
-    this.data.update(board);
-  }
 
-  async handleDialogSubmit() {
-    let board: Board;
-    board = await this.canvasService.updateBoardName(
-      this.boardID,
-      this.boardName.trim()
-    );
-    board = await this.canvasService.updateBoardTask(
-      this.boardID,
-      this.taskTitle,
-      this.taskMessage
-    );
-    board = await this.canvasService.updateBoardPermissions(
-      this.boardID,
-      this.permissions
-    );
-    board = await this.canvasService.updateBoardUpvotes(
-      this.boardID,
-      this.upvoteLimit
-    );
+    this.canvasService
+      .updateBoardImage(this.boardID, null)
+      .then((board) => {
+        this.data.update(board);
+      })
+      .catch((error) => {
+        const errorMsg = getErrorMessage(error);
+        console.error(errorMsg);
+        this._snackbarService.queueSnackbar(
+          'A problem occured while removing the board image. Please try again',
+          `Error: ${errorMsg}`
+        );
+      });
+  }
 
-    if (this.currentBgImage) board = await this.updateBoardImageSettings();
+  handleDialogSubmit(): void {
+    this.loading = true;
+    this.canvasService
+      .updateBoardName(this.boardID, this.boardName.trim())
+      .then(() => {
+        return this.canvasService.updateBoardTask(
+          this.boardID,
+          this.taskTitle,
+          this.taskMessage
+        );
+      })
+      .then(() => {
+        return this.canvasService.updateBoardPermissions(
+          this.boardID,
+          this.permissions
+        );
+      })
+      .then(() => {
+        return this.canvasService.updateBoardUpvotes(
+          this.boardID,
+          this.upvoteLimit
+        );
+      })
+      .then((board) => {
+        return this.currentBgImage
+          ? this.updateBoardImageSettings()
+          : Promise.resolve(board);
+      })
+      .then(() => {
+        return this.boardService.update(this.boardID, {
+          initialZoom: this.initialZoom,
+        });
+      })
+      .then((board) => {
+        this.data.update(board);
+      })
+      .catch((error) => {
+        const errorMsg = getErrorMessage(error);
+        console.error(errorMsg);
+        this._snackbarService.queueSnackbar(
+          'A problem occured while updating the board. Please try again',
+          `Error: ${errorMsg}`
+        );
+      })
+      .finally(() => {
+        this.loading = false;
+      });
 
-    board = await this.boardService.update(this.boardID, {
-      initialZoom: this.initialZoom,
-    });
-    await this.data.update(board);
     this.dialogRef.close();
   }
 
-  async ngOnDestroy(): Promise<void> {
+  ngOnDestroy(): void {
     if (this.tagsChanged) {
-      this.socketService.emit(
-        SocketEvent.BOARD_TAGS_UPDATE,
-        await this.boardService.get(this.boardID)
-      );
+      this.boardService.get(this.boardID).then((board) => {
+        this.socketService.emit(SocketEvent.BOARD_TAGS_UPDATE, board);
+      });
     }
   }
 
-  async handleClearBoard() {
+  handleClearBoard(): void {
     this.dialog.open(ConfirmModalComponent, {
       width: '500px',
       data: {
@@ -208,33 +275,32 @@ export class ConfigurationModalComponent {
           'Are you sure you want to clear posts from this board? NOTE: Posts will be cleared from the board but remain in the the list view and any assigned buckets.',
         handleConfirm: async () => {
           this.postService.getAllByBoard(this.boardID).then(async (data) => {
-            await this.canvasService.clearPostsFromBoard(data);
+            this.canvasService.clearPostsFromBoard(data);
           });
         },
       },
     });
   }
 
-  async handleDeleteBoard() {
+  handleDeleteBoard(): void {
     this.dialog.open(ConfirmModalComponent, {
       width: '500px',
       data: {
         title: 'Confirmation',
         message:
           'This will permanently delete the board and all related content. Are you sure you want to do this?',
-        handleConfirm: async () => {
-          const board = await this.boardService.remove(this.boardID);
-          if (board) {
+        handleConfirm: () => {
+          this.boardService.remove(this.boardID).then((board) => {
             this.dialogRef.close();
-            this.router.navigate(['project/' + this.project.projectID]);
-            await this.data.update(board, true);
-          }
+            this._router.navigate(['project/' + this.project.projectID]);
+            this.data.update(board, true);
+          });
         },
       },
     });
   }
 
-  resetColor() {
+  resetColor(): void {
     this.newTagColor = TAG_DEFAULT_COLOR;
   }
 
@@ -242,34 +308,52 @@ export class ConfigurationModalComponent {
     this.dialogRef.close();
   }
 
-  openVoteDeleteDialog() {
+  openVoteDeleteDialog(): void {
     this.dialog.open(ConfirmModalComponent, {
       width: '500px',
       data: {
         title: 'Confirmation',
         message: 'Are you sure you want to clear all votes from the board?',
-        handleConfirm: async () => {
-          await this.upvoteService.removeByBoard(this.boardID);
+        handleConfirm: () => {
+          this.upvoteService.removeByBoard(this.boardID).then(() => {
+            this._snackbarService.queueSnackbar(
+              'Success! All votes have been cleared'
+            );
+          });
         },
       },
     });
   }
 
-  async copyConfiguration() {
-    let boards = await this.boardService.getMultipleBy(this.project.boards, {
-      scope: BoardScope.PROJECT_PERSONAL,
-    });
-    boards = boards.filter((b) => {
-      if (this.isTeacherPersonalBoard) {
-        return this.project.teacherIDs.includes(b.ownerID);
-      } else {
-        return !this.project.teacherIDs.includes(b.ownerID);
-      }
-    });
+  copyConfiguration(): void {
+    this.boardService
+      .getMultipleBy(this.project.boards, {
+        scope: BoardScope.PROJECT_PERSONAL,
+      })
+      .then((boards) => {
+        boards = boards.filter((b) => {
+          return this.isTeacherPersonalBoard
+            ? this.project.teacherIDs.includes(b.ownerID)
+            : !this.project.teacherIDs.includes(b.ownerID);
+        });
 
-    await this.boardService.copyConfiguration(
-      this.boardID,
-      boards.map((b) => b.boardID)
-    );
+        return this.boardService.copyConfiguration(
+          this.boardID,
+          boards.map((b) => b.boardID)
+        );
+      })
+      .then(() => {
+        this._snackbarService.queueSnackbar(
+          'Success! Board configuration copied to all Personal Teacher Boards'
+        );
+      })
+      .catch((error) => {
+        const errorMsg = getErrorMessage(error);
+        console.error(errorMsg);
+        this._snackbarService.queueSnackbar(
+          'A problem occured while updating the board. Please try again',
+          `Error: ${errorMsg}`
+        );
+      });
   }
 }
diff --git a/frontend/src/app/services/board.service.ts b/frontend/src/app/services/board.service.ts
index 799537f5..d648e657 100644
--- a/frontend/src/app/services/board.service.ts
+++ b/frontend/src/app/services/board.service.ts
@@ -46,7 +46,7 @@ export class BoardService {
 
   copyConfiguration(boardID: string, boards: string[]) {
     return this.http
-      .post<any>(`boards/${boardID}/copy-configuration/`, { boards })
+      .post<string[]>(`boards/${boardID}/copy-configuration/`, { boards })
       .toPromise();
   }
 }
diff --git a/frontend/src/styles.scss b/frontend/src/styles.scss
index 42150c61..0bc422ea 100644
--- a/frontend/src/styles.scss
+++ b/frontend/src/styles.scss
@@ -63,3 +63,23 @@ a {
 .wide-snackbar {
   max-width: 75% !important;
 }
+
+@keyframes spinner {
+  to {transform: rotate(360deg);}
+}
+
+.spinner:before {
+  content: '';
+  box-sizing: border-box;
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  width: 20px;
+  height: 20px;
+  margin-top: -10px;
+  margin-left: -10px;
+  border-radius: 50%;
+  border: 2px solid #ffffff;
+  border-top-color: #000000;
+  animation: spinner .8s linear infinite;
+}

From 7ce54d0b56d5a4ef9e4ee068b8af3ebb3c4a84e2 Mon Sep 17 00:00:00 2001
From: Daniel Chua <53444908+DCH25@users.noreply.github.com>
Date: Wed, 12 Apr 2023 11:11:59 -0400
Subject: [PATCH 2/4] feat: project configuration spinners

---
 ...project-configuration-modal.component.html |  8 +++++-
 .../project-configuration-modal.component.ts  | 28 +++++++++++++------
 2 files changed, 26 insertions(+), 10 deletions(-)

diff --git a/frontend/src/app/components/project-configuration-modal/project-configuration-modal.component.html b/frontend/src/app/components/project-configuration-modal/project-configuration-modal.component.html
index 48a20357..8b6665ed 100644
--- a/frontend/src/app/components/project-configuration-modal/project-configuration-modal.component.html
+++ b/frontend/src/app/components/project-configuration-modal/project-configuration-modal.component.html
@@ -53,7 +53,13 @@ <h1 mat-dialog-title>Project Configuration</h1>
 </div>
 <div mat-dialog-actions>
   <button mat-button (click)="onNoClick()">Cancel</button>
-  <button mat-button (click)="handleDialogSubmit()" cdkFocusInitial>
+  <button
+    mat-button
+    [disabled]="loading"
+    [class.spinner]="loading"
+    (click)="handleDialogSubmit()"
+    cdkFocusInitial
+  >
     Update Configuration!
   </button>
 </div>
diff --git a/frontend/src/app/components/project-configuration-modal/project-configuration-modal.component.ts b/frontend/src/app/components/project-configuration-modal/project-configuration-modal.component.ts
index 50241f6b..f096ceaf 100644
--- a/frontend/src/app/components/project-configuration-modal/project-configuration-modal.component.ts
+++ b/frontend/src/app/components/project-configuration-modal/project-configuration-modal.component.ts
@@ -21,6 +21,8 @@ export class ProjectConfigurationModalComponent implements OnInit {
 
   Role: typeof Role = Role;
 
+  loading: boolean = false;
+
   constructor(
     public dialogRef: MatDialogRef<ProjectConfigurationModalComponent>,
     public boardService: BoardService,
@@ -34,22 +36,30 @@ export class ProjectConfigurationModalComponent implements OnInit {
     this.membershipDisabledEditable = this.project.membershipDisabled;
   }
 
-  async ngOnInit() {
-    this.members = (
-      await this.userService.getMultipleByIds(this.project.members)
-    ).sort((a, b) => b.role.charCodeAt(0) - a.role.charCodeAt(0));
+  ngOnInit(): void {
+    this.userService.getMultipleByIds(this.project.members)
+      .then((users) => {
+        this.members = users.sort((a, b) => b.role.charCodeAt(0) - a.role.charCodeAt(0));
+      });
   }
 
-  async handleDialogSubmit() {
-    this.project = await this.projectService.update(this.project.projectID, {
+  handleDialogSubmit(): void {
+    this.loading = true;
+    this.projectService.update(this.project.projectID, {
       name: this.nameEditable,
       membershipDisabled: this.membershipDisabledEditable,
       members: this.members.map((user) => user.userID),
-    });
-    this.close();
+    })
+      .then((project) => {
+        this.project = project;
+      })
+      .finally(() => {
+        this.close();
+        this.loading = false;
+      });
   }
 
-  async removeUser(_user: User) {
+  removeUser(_user: User): void {
     this.members = this.members.filter((user) => user.userID !== _user.userID);
   }
 

From e10558f75474def46a2fa29a9530618b82438b2e Mon Sep 17 00:00:00 2001
From: Daniel Chua <53444908+DCH25@users.noreply.github.com>
Date: Wed, 12 Apr 2023 11:26:24 -0400
Subject: [PATCH 3/4] feat: post modal loading spinners

---
 .../add-post-modal/add-post.component.html    |  2 +-
 .../post-modal/post-modal.component.html      |  5 ++++-
 .../post-modal/post-modal.component.ts        | 22 +++++++++++++------
 .../project-configuration-modal.component.ts  | 20 +++++++++--------
 4 files changed, 31 insertions(+), 18 deletions(-)

diff --git a/frontend/src/app/components/add-post-modal/add-post.component.html b/frontend/src/app/components/add-post-modal/add-post.component.html
index bb66aeb0..4f2ecdd8 100644
--- a/frontend/src/app/components/add-post-modal/add-post.component.html
+++ b/frontend/src/app/components/add-post-modal/add-post.component.html
@@ -174,7 +174,7 @@ <h1 mat-dialog-title *ngIf="editingPost">Update Post</h1>
         <mat-icon class="cancel" (click)="removeTag(tag)">cancel</mat-icon>
       </mat-chip>
       <mat-menu #menu1="matMenu">
-        <div mat-menu-item *ngIf="tagOptions && tagOptions.length == 0">
+        <div mat-menu-item *ngIf="tagOptions && tagOptions.length === 0">
           No tags available.
         </div>
         <div
diff --git a/frontend/src/app/components/post-modal/post-modal.component.html b/frontend/src/app/components/post-modal/post-modal.component.html
index 7a28d081..41188660 100644
--- a/frontend/src/app/components/post-modal/post-modal.component.html
+++ b/frontend/src/app/components/post-modal/post-modal.component.html
@@ -143,6 +143,8 @@
             <div
               mat-menu-item
               (click)="addTag($event, tagOption)"
+              [class.spinner]="loading"
+              [disabled]="loading"
               *ngFor="let tagOption of tagOptions"
             >
               {{ tagOption.name }}
@@ -190,7 +192,8 @@
   <div mat-dialog-actions>
     <button
       *ngIf="isEditing"
-      [disabled]="!titleControl.valid || !descControl.valid"
+      [disabled]="!titleControl.valid || !descControl.valid || loading"
+      [class.spinner]="loading"
       mat-button
       (click)="onUpdate()"
     >
diff --git a/frontend/src/app/components/post-modal/post-modal.component.ts b/frontend/src/app/components/post-modal/post-modal.component.ts
index a02d5fce..f25951a9 100644
--- a/frontend/src/app/components/post-modal/post-modal.component.ts
+++ b/frontend/src/app/components/post-modal/post-modal.component.ts
@@ -108,6 +108,8 @@ export class PostModalComponent {
   expandedUpvotesView = false;
   expandedUpvotes: any[] = [];
 
+  loading: boolean = false;
+
   constructor(
     public dialogRef: MatDialogRef<PostModalComponent>,
     public dialog: MatDialog,
@@ -266,15 +268,21 @@ export class PostModalComponent {
     });
   }
 
-  async addTag(event, tagOption) {
+  addTag(event: MouseEvent, tagOption: Tag): void {
     event.stopPropagation();
 
-    this.post = await this.canvasService.tag(this.post, tagOption);
-    this.tags.push(tagOption);
-    this.tagOptions = this.tagOptions.filter((tag) => tag != tagOption);
-    if (this.data.onTagEvent) {
-      this.data.onTagEvent(this.post.postID, 'add');
-    }
+    this.loading = true;
+    this.canvasService
+      .tag(this.post, tagOption)
+      .then((post) => {
+        this.post = post;
+        this.tags.push(tagOption);
+        this.tagOptions = this.tagOptions.filter((tag) => tag != tagOption);
+        if (this.data.onTagEvent) {
+          this.data.onTagEvent(this.post.postID, 'add');
+        }
+      })
+      .finally(() => (this.loading = false));
   }
 
   async removeTag(tag) {
diff --git a/frontend/src/app/components/project-configuration-modal/project-configuration-modal.component.ts b/frontend/src/app/components/project-configuration-modal/project-configuration-modal.component.ts
index f096ceaf..33ad24a4 100644
--- a/frontend/src/app/components/project-configuration-modal/project-configuration-modal.component.ts
+++ b/frontend/src/app/components/project-configuration-modal/project-configuration-modal.component.ts
@@ -37,19 +37,21 @@ export class ProjectConfigurationModalComponent implements OnInit {
   }
 
   ngOnInit(): void {
-    this.userService.getMultipleByIds(this.project.members)
-      .then((users) => {
-        this.members = users.sort((a, b) => b.role.charCodeAt(0) - a.role.charCodeAt(0));
-      });
+    this.userService.getMultipleByIds(this.project.members).then((users) => {
+      this.members = users.sort(
+        (a, b) => b.role.charCodeAt(0) - a.role.charCodeAt(0)
+      );
+    });
   }
 
   handleDialogSubmit(): void {
     this.loading = true;
-    this.projectService.update(this.project.projectID, {
-      name: this.nameEditable,
-      membershipDisabled: this.membershipDisabledEditable,
-      members: this.members.map((user) => user.userID),
-    })
+    this.projectService
+      .update(this.project.projectID, {
+        name: this.nameEditable,
+        membershipDisabled: this.membershipDisabledEditable,
+        members: this.members.map((user) => user.userID),
+      })
       .then((project) => {
         this.project = project;
       })

From 2cd5e39fabdce6b190e66ca51c6a7658c6d01c0a Mon Sep 17 00:00:00 2001
From: Daniel Chua <53444908+DCH25@users.noreply.github.com>
Date: Wed, 12 Apr 2023 12:02:47 -0400
Subject: [PATCH 4/4] fix: snackbar fades after 5 seconds

---
 frontend/src/app/services/snackbar.service.ts | 7 ++++---
 1 file changed, 4 insertions(+), 3 deletions(-)

diff --git a/frontend/src/app/services/snackbar.service.ts b/frontend/src/app/services/snackbar.service.ts
index bfa6bc70..50167d5e 100644
--- a/frontend/src/app/services/snackbar.service.ts
+++ b/frontend/src/app/services/snackbar.service.ts
@@ -1,6 +1,6 @@
 import { Injectable, OnDestroy } from '@angular/core';
 import { MatSnackBar, MatSnackBarConfig } from '@angular/material/snack-bar';
-import { BehaviorSubject, Subscription } from 'rxjs';
+import { BehaviorSubject } from 'rxjs';
 import { SnackBarComponent } from '../components/snackbar/snackbar.component';
 
 export interface SnackbarConfig {
@@ -55,13 +55,13 @@ export class SnackbarService implements OnDestroy {
     title: string,
     description = '',
     configParams: SnackbarConfig = {}
-  ) {
+  ): void {
     this.snackBarQueue.next(
       this.snackBarQueue.value.concat([{ title, description, configParams }])
     );
   }
 
-  dequeueSnackbar() {
+  dequeueSnackbar(): void {
     this.snackBarQueue.value.pop();
     this.snackBarQueue.next(this.snackBarQueue.value);
   }
@@ -72,6 +72,7 @@ export class SnackbarService implements OnDestroy {
 
   private openSnackbar(item: SnackBarQueueItem) {
     const config = item.configParams.matSnackbarConfig ?? {};
+    config.duration = 5000;
     config.data = {
       title: item.title,
       description: item.description,