diff --git a/src/app/app.component.scss b/src/app/app.component.scss
index b89730b..937a165 100644
--- a/src/app/app.component.scss
+++ b/src/app/app.component.scss
@@ -1,5 +1,6 @@
 :host {
   .loading {
-    position: "fixed";
+    position: fixed;
+    z-index: 3;
   }
 }
diff --git a/src/app/app.component.ts b/src/app/app.component.ts
index 3a3ff0f..6452906 100644
--- a/src/app/app.component.ts
+++ b/src/app/app.component.ts
@@ -1,11 +1,19 @@
-import { Component } from '@angular/core';
+import { Component, OnInit } from '@angular/core';
+import { LoadingService } from './shared/services/loading.service';
 
 @Component({
   selector: 'app-root',
   templateUrl: './app.component.html',
   styleUrl: './app.component.scss',
 })
-export class AppComponent {
+export class AppComponent implements OnInit {
   displayLoading = 'none';
-  //block
+
+  constructor(private loadingService: LoadingService) {}
+
+  ngOnInit() {
+    this.loadingService.loading$.subscribe(
+      (data) => (this.displayLoading = data ? 'block' : 'none')
+    );
+  }
 }
diff --git a/src/app/graph/components/add-graph/add-graph.component.ts b/src/app/graph/components/add-graph/add-graph.component.ts
index 0486a92..93e75a9 100644
--- a/src/app/graph/components/add-graph/add-graph.component.ts
+++ b/src/app/graph/components/add-graph/add-graph.component.ts
@@ -2,10 +2,11 @@ import { ChangeDetectorRef, Component, ViewChild } from '@angular/core';
 import { Papa } from 'ngx-papaparse';
 import { MatPaginator } from '@angular/material/paginator';
 import { MatTableDataSource } from '@angular/material/table';
-import { UserManageNotificationComponent } from '../../../user/components/dashboard/manage-users/user-manage-notification/user-manage-notification.component';
 import { MatSnackBar } from '@angular/material/snack-bar';
 import { AddGraphService } from '../../services/add-graph/add-graph.service';
 import { CategoryData } from '../../model/Category';
+import { LoadingService } from '../../../shared/services/loading.service';
+import { DangerSuccessNotificationComponent } from '../../../shared/components/danger-success-notification/danger-success-notification.component';
 
 @Component({
   selector: 'app-add-graph',
@@ -36,12 +37,26 @@ export class AddGraphComponent {
     private papaParseService: Papa,
     private changeDetector: ChangeDetectorRef,
     private _snackBar: MatSnackBar,
-    private addGraphService: AddGraphService
-  ) {}
+    private addGraphService: AddGraphService,
+    private loadingService: LoadingService
+  ) {
+    this.loadingService.setLoading(false);
+  }
 
   loadCategory() {
-    this.addGraphService.getCategories().subscribe((data) => {
-      this.categories = data.paginateList;
+    this.addGraphService.getCategories().subscribe({
+      next: (data) => {
+        this.categories = data.paginateList;
+        this.loadingService.setLoading(false);
+      },
+      error: (error) => {
+        this._snackBar.openFromComponent(DangerSuccessNotificationComponent, {
+          data: error.error.message,
+          panelClass: ['notification-class-danger'],
+          duration: 2000,
+        });
+        this.loadingService.setLoading(false);
+      },
     });
   }
 
@@ -54,6 +69,7 @@ export class AddGraphComponent {
   }
 
   readFile(event: Event) {
+    this.loadingService.setLoading(true);
     this.wrongFormat = false;
     this.isLoaded = false;
     this.isHighlighted = false;
@@ -64,11 +80,12 @@ export class AddGraphComponent {
 
     if (fileExtension !== 'csv') {
       this.wrongFormat = true;
-      this._snackBar.openFromComponent(UserManageNotificationComponent, {
+      this._snackBar.openFromComponent(DangerSuccessNotificationComponent, {
         data: 'Please upload a CSV file',
         panelClass: ['notification-class-danger'],
         duration: 2000,
       });
+      this.loadingService.setLoading(false);
       return;
     }
 
@@ -92,30 +109,40 @@ export class AddGraphComponent {
       if (!this.categories.length) {
         this.loadCategory();
       }
+      this.loadingService.setLoading(false);
     };
   }
 
   uploadFile() {
     this.isUploading = true;
+    this.loadingService.setLoading(true);
     if (this.csvType === 'node') {
       this.addGraphService
         .uploadNode(this.selectedFile, this.selectedId, this.categoryName)
         .subscribe({
           next: () => {
             this.reset();
-            this._snackBar.openFromComponent(UserManageNotificationComponent, {
-              data: 'Node added successfully!',
-              panelClass: ['notification-class-success'],
-              duration: 2000,
-            });
+            this._snackBar.openFromComponent(
+              DangerSuccessNotificationComponent,
+              {
+                data: 'Node added successfully!',
+                panelClass: ['notification-class-success'],
+                duration: 2000,
+              }
+            );
+            this.loadingService.setLoading(false);
           },
           error: (error) => {
             this.isUploading = false;
-            this._snackBar.openFromComponent(UserManageNotificationComponent, {
-              data: error.error.message,
-              panelClass: ['notification-class-danger'],
-              duration: 2000,
-            });
+            this._snackBar.openFromComponent(
+              DangerSuccessNotificationComponent,
+              {
+                data: error.error.message,
+                panelClass: ['notification-class-danger'],
+                duration: 2000,
+              }
+            );
+            this.loadingService.setLoading(false);
           },
         });
     } else {
@@ -128,19 +155,27 @@ export class AddGraphComponent {
         .subscribe({
           next: () => {
             this.reset();
-            this._snackBar.openFromComponent(UserManageNotificationComponent, {
-              data: 'Edge added successfully!',
-              panelClass: ['notification-class-success'],
-              duration: 2000,
-            });
+            this._snackBar.openFromComponent(
+              DangerSuccessNotificationComponent,
+              {
+                data: 'Edge added successfully!',
+                panelClass: ['notification-class-success'],
+                duration: 2000,
+              }
+            );
+            this.loadingService.setLoading(false);
           },
           error: (error) => {
             this.isUploading = false;
-            this._snackBar.openFromComponent(UserManageNotificationComponent, {
-              data: error.error.message,
-              panelClass: ['notification-class-danger'],
-              duration: 2000,
-            });
+            this._snackBar.openFromComponent(
+              DangerSuccessNotificationComponent,
+              {
+                data: error.error.message,
+                panelClass: ['notification-class-danger'],
+                duration: 2000,
+              }
+            );
+            this.loadingService.setLoading(false);
           },
         });
     }
@@ -160,5 +195,6 @@ export class AddGraphComponent {
     this.selectedSource = '';
     this.selectedDestination = '';
     this.categoryName = '';
+    this.name = '';
   }
 }
diff --git a/src/app/graph/components/category/cat-delete-confirm/cat-delete-confirm.component.ts b/src/app/graph/components/category/cat-delete-confirm/cat-delete-confirm.component.ts
index 3651e28..8272e63 100644
--- a/src/app/graph/components/category/cat-delete-confirm/cat-delete-confirm.component.ts
+++ b/src/app/graph/components/category/cat-delete-confirm/cat-delete-confirm.component.ts
@@ -2,8 +2,9 @@ import { Component, Inject } from '@angular/core';
 import { MAT_DIALOG_DATA } from '@angular/material/dialog';
 import { CategoryService } from '../../../services/category/category.service';
 import { CategoryData } from '../../../model/Category';
-import { UserManageNotificationComponent } from '../../../../user/components/dashboard/manage-users/user-manage-notification/user-manage-notification.component';
 import { MatSnackBar } from '@angular/material/snack-bar';
+import { LoadingService } from '../../../../shared/services/loading.service';
+import { DangerSuccessNotificationComponent } from '../../../../shared/components/danger-success-notification/danger-success-notification.component';
 
 @Component({
   selector: 'app-cat-delete-confirm',
@@ -36,28 +37,31 @@ export class CatDeleteConfirmComponent {
     },
     private categoryService: CategoryService,
     private _snackBar: MatSnackBar,
+    private loadingService: LoadingService
   ) {}
 
   deleteUser() {
+    this.loadingService.setLoading(true);
     this.categoryService.deleteCategory(this.data.category.id).subscribe({
       next: () => {
-        console.log(12121212);
         this.categoryService.getCategories(
           this.data.pageSize,
-          this.data.pageIndex,
+          this.data.pageIndex
         );
-        this._snackBar.openFromComponent(UserManageNotificationComponent, {
+        this._snackBar.openFromComponent(DangerSuccessNotificationComponent, {
           data: 'Category created successfully.',
           panelClass: ['notification-class-success'],
           duration: 2000,
         });
+        this.loadingService.setLoading(false);
       },
       error: (error) => {
-        this._snackBar.openFromComponent(UserManageNotificationComponent, {
+        this._snackBar.openFromComponent(DangerSuccessNotificationComponent, {
           data: error.error.message,
           panelClass: ['notification-class-danger'],
           duration: 2000,
         });
+        this.loadingService.setLoading(false);
       },
     });
   }
diff --git a/src/app/graph/components/category/category.component.ts b/src/app/graph/components/category/category.component.ts
index cf39960..48bdc3c 100644
--- a/src/app/graph/components/category/category.component.ts
+++ b/src/app/graph/components/category/category.component.ts
@@ -5,7 +5,8 @@ import { PageEvent } from '@angular/material/paginator';
 import { CategoryData, GetCategoriesResponse } from '../../model/Category';
 import { CatDeleteConfirmComponent } from './cat-delete-confirm/cat-delete-confirm.component';
 import { CategoryService } from '../../services/category/category.service';
-import { UserManageNotificationComponent } from '../../../user/components/dashboard/manage-users/user-manage-notification/user-manage-notification.component';
+import { LoadingService } from '../../../shared/services/loading.service';
+import { DangerSuccessNotificationComponent } from '../../../shared/components/danger-success-notification/danger-success-notification.component';
 
 @Component({
   selector: 'app-category',
@@ -32,16 +33,26 @@ export class CategoryComponent implements OnInit {
     private readonly dialog: MatDialog,
     private _snackBar: MatSnackBar,
     private categoryService: CategoryService,
+    private loadingService: LoadingService
   ) {}
 
   ngOnInit(): void {
-    this.categoryService.categoriesData$.subscribe(
-      (response: GetCategoriesResponse) => {
+    this.categoryService.categoriesData$.subscribe({
+      next: (response: GetCategoriesResponse) => {
         this.categoriesData = response.paginateList;
         this.length = response.totalCount;
         this.pageIndex = response.pageIndex;
+        this.loadingService.setLoading(false);
       },
-    );
+      error: (error) => {
+        this._snackBar.openFromComponent(DangerSuccessNotificationComponent, {
+          data: error.error.message,
+          panelClass: ['notification-class-danger'],
+          duration: 2000,
+        });
+        this.loadingService.setLoading(false);
+      },
+    });
 
     this.categoryService.notification$.subscribe(
       (data: { status: boolean; message: string }) => {
@@ -56,10 +67,11 @@ export class CategoryComponent implements OnInit {
         if (data.status) {
           this.dialog.closeAll();
         }
-      },
+      }
     );
 
     this.categoryService.getCategories(this.pageSize, this.pageIndex);
+    this.loadingService.setLoading(false);
   }
 
   addCategory() {
@@ -82,23 +94,26 @@ export class CategoryComponent implements OnInit {
   }
 
   saveNewCategory() {
+    this.loadingService.setLoading(true);
     this.categoryService.createCategory(this.nameValue).subscribe({
       next: () => {
         this.categoryService.getCategories(this.pageSize, this.pageIndex);
         this.isAdding = false;
         this.nameValue = '';
-        this._snackBar.openFromComponent(UserManageNotificationComponent, {
+        this._snackBar.openFromComponent(DangerSuccessNotificationComponent, {
           data: 'Category created successfully.',
           panelClass: ['notification-class-success'],
           duration: 2000,
         });
+        this.loadingService.setLoading(false);
       },
       error: (error) => {
-        this._snackBar.openFromComponent(UserManageNotificationComponent, {
+        this._snackBar.openFromComponent(DangerSuccessNotificationComponent, {
           data: error.error.message,
           panelClass: ['notification-class-danger'],
           duration: 2000,
         });
+        this.loadingService.setLoading(false);
       },
     });
   }
diff --git a/src/app/graph/components/data-analysis/data-analysis.component.ts b/src/app/graph/components/data-analysis/data-analysis.component.ts
index e84b042..288ad87 100644
--- a/src/app/graph/components/data-analysis/data-analysis.component.ts
+++ b/src/app/graph/components/data-analysis/data-analysis.component.ts
@@ -20,6 +20,9 @@ import {
   transition,
   trigger,
 } from '@angular/animations';
+import { LoadingService } from '../../../shared/services/loading.service';
+import { MatSnackBar } from '@angular/material/snack-bar';
+import { DangerSuccessNotificationComponent } from '../../../shared/components/danger-success-notification/danger-success-notification.component';
 
 @Component({
   selector: 'app-data-analysis',
@@ -57,9 +60,11 @@ export class DataAnalysisComponent implements AfterViewInit {
 
   constructor(
     private themeService: ThemeService,
+    private _snackBar: MatSnackBar,
     private loadGraphService: LoadGraphService,
     private dialog: MatDialog,
-    private changeDetector: ChangeDetectorRef
+    private changeDetector: ChangeDetectorRef,
+    private loadingService: LoadingService
   ) {}
 
   handlePageEvent(e: PageEvent) {
@@ -71,12 +76,24 @@ export class DataAnalysisComponent implements AfterViewInit {
   ngAfterViewInit() {
     this.createGraph();
 
-    this.loadGraphService.nodesData$.subscribe((data) => {
-      this.accounts = data.paginateList;
-      this.length = data.totalCount;
-      this.pageIndex = data.pageIndex;
+    this.loadGraphService.nodesData$.subscribe({
+      next: (data) => {
+        this.accounts = data.paginateList;
+        this.length = data.totalCount;
+        this.pageIndex = data.pageIndex;
+        this.loadingService.setLoading(false);
+      },
+      error: (error) => {
+        this._snackBar.openFromComponent(DangerSuccessNotificationComponent, {
+          data: error.error.message,
+          panelClass: ['notification-class-danger'],
+          duration: 2000,
+        });
+        this.loadingService.setLoading(false);
+      },
     });
     this.loadGraphService.getAllNodes();
+    this.loadingService.setLoading(false);
   }
 
   private createGraph() {
@@ -129,11 +146,21 @@ export class DataAnalysisComponent implements AfterViewInit {
         document.getElementById('right-click-node-info') as HTMLElement
       ).dataset['nodeid'];
     }
-    this.loadGraphService.getNodeInfo(account!).subscribe((data) => {
-      this.dialog.open(InfoDialogComponent, {
-        width: '105rem',
-        data,
-      });
+    this.loadGraphService.getNodeInfo(account!).subscribe({
+      next: (data) => {
+        this.dialog.open(InfoDialogComponent, {
+          width: '105rem',
+          data,
+        });
+      },
+      error: (error) => {
+        this._snackBar.openFromComponent(DangerSuccessNotificationComponent, {
+          data: error.error.message,
+          panelClass: ['notification-class-danger'],
+          duration: 2000,
+        });
+        this.loadingService.setLoading(false);
+      },
     });
   }
 
@@ -145,11 +172,20 @@ export class DataAnalysisComponent implements AfterViewInit {
     const nodeId = (
       document.getElementById('right-click-node-info') as HTMLElement
     ).dataset['nodeid'];
-    console.log(nodeId);
 
-    this.loadGraphService.getGraph('5').subscribe((data) => {
-      this.nodes.add(data.nodes as Node);
-      this.edges.add(data.edges as Edge);
+    this.loadGraphService.getGraph(nodeId!).subscribe({
+      next: (data) => {
+        this.nodes.add(data.nodes as Node);
+        this.edges.add(data.edges as Edge);
+      },
+      error: (error) => {
+        this._snackBar.openFromComponent(DangerSuccessNotificationComponent, {
+          data: error.error.message,
+          panelClass: ['notification-class-danger'],
+          duration: 2000,
+        });
+        this.loadingService.setLoading(false);
+      },
     });
   }
 
diff --git a/src/app/graph/components/data-analysis/graph-options.ts b/src/app/graph/components/data-analysis/graph-options.ts
index 2acad8b..40a109b 100644
--- a/src/app/graph/components/data-analysis/graph-options.ts
+++ b/src/app/graph/components/data-analysis/graph-options.ts
@@ -12,8 +12,6 @@ export function getOptions() {
   const textColor: string =
     dataSetValue == 'dark' ? 'rgba(255,255,255,0.9)' : '#222';
 
-  console.log(dataSetValue);
-
   const svgDataUrl =
     'data:image/svg+xml;charset=UTF-8,' +
     encodeURIComponent(`
diff --git a/src/app/graph/services/add-graph/add-graph.service.ts b/src/app/graph/services/add-graph/add-graph.service.ts
index b78d2fd..be28b14 100644
--- a/src/app/graph/services/add-graph/add-graph.service.ts
+++ b/src/app/graph/services/add-graph/add-graph.service.ts
@@ -2,6 +2,7 @@ import { Injectable } from '@angular/core';
 import { HttpClient } from '@angular/common/http';
 import { environment } from '../../../../../api-config/api-url';
 import { GetCategoriesResponse } from '../../model/Category';
+import { LoadingService } from '../../../shared/services/loading.service';
 
 @Injectable({
   providedIn: 'root',
@@ -9,9 +10,13 @@ import { GetCategoriesResponse } from '../../model/Category';
 export class AddGraphService {
   private readonly apiUrl = environment.apiUrl + '/api/File';
 
-  constructor(private httpClient: HttpClient) {}
+  constructor(
+    private httpClient: HttpClient,
+    private loadingService: LoadingService
+  ) {}
 
   uploadNode(file: File, header: string, category: string) {
+    this.loadingService.setLoading(true);
     const formData: FormData = new FormData();
 
     formData.append('Header', header);
@@ -25,6 +30,7 @@ export class AddGraphService {
   }
 
   uploadEdge(file: File, from: string, to: string) {
+    this.loadingService.setLoading(true);
     const formData = new FormData();
 
     formData.append('File', file);
@@ -37,6 +43,7 @@ export class AddGraphService {
   }
 
   getCategories() {
+    this.loadingService.setLoading(true);
     const pageSize = 999;
     const pageNumber = 0;
     return this.httpClient.get<GetCategoriesResponse>(
diff --git a/src/app/graph/services/category/category.service.ts b/src/app/graph/services/category/category.service.ts
index 5b36409..1de0de4 100644
--- a/src/app/graph/services/category/category.service.ts
+++ b/src/app/graph/services/category/category.service.ts
@@ -3,6 +3,7 @@ import { HttpClient } from '@angular/common/http';
 import { environment } from '../../../../../api-config/api-url';
 import { Subject } from 'rxjs';
 import { GetCategoriesResponse } from '../../model/Category';
+import { LoadingService } from '../../../shared/services/loading.service';
 
 @Injectable({
   providedIn: 'root',
@@ -16,15 +17,19 @@ export class CategoryService {
   private categoriesData = new Subject<GetCategoriesResponse>();
   categoriesData$ = this.categoriesData.asObservable();
 
-  constructor(private httpClient: HttpClient) {}
+  constructor(
+    private httpClient: HttpClient,
+    private loadingService: LoadingService
+  ) {}
 
   getCategories(pageSize = 10, pageNumber = 0) {
+    this.loadingService.setLoading(true);
     return this.httpClient
       .get<GetCategoriesResponse>(
         this.apiUrl + `?pageNumber=${pageNumber}&pageSize=${pageSize}`,
         {
           withCredentials: true,
-        },
+        }
       )
       .subscribe((cats) => {
         this.categoriesData.next(cats);
@@ -32,23 +37,25 @@ export class CategoryService {
   }
 
   createCategory(name: string) {
+    this.loadingService.setLoading(true);
     return this.httpClient.post(
       this.apiUrl,
       { name: name },
       {
         withCredentials: true,
-      },
+      }
     );
   }
 
   updateCategory(category: { id: number; name: string }) {
+    this.loadingService.setLoading(true);
     return this.httpClient.put(this.apiUrl + `/${category.id}`, category, {
       withCredentials: true,
     });
   }
 
   deleteCategory(id: number) {
-    console.log('deleteCategory', id);
+    this.loadingService.setLoading(true);
     return this.httpClient.delete(this.apiUrl + `/${id}`, {
       withCredentials: true,
     });
diff --git a/src/app/graph/services/load-graph/load-graph.service.ts b/src/app/graph/services/load-graph/load-graph.service.ts
index fa044a9..85e88c7 100644
--- a/src/app/graph/services/load-graph/load-graph.service.ts
+++ b/src/app/graph/services/load-graph/load-graph.service.ts
@@ -3,6 +3,7 @@ import { HttpClient } from '@angular/common/http';
 import { environment } from '../../../../../api-config/api-url';
 import { AllNodes, Graph } from '../../model/graph';
 import { Subject } from 'rxjs';
+import { LoadingService } from '../../../shared/services/loading.service';
 
 @Injectable({
   providedIn: 'root',
@@ -14,9 +15,13 @@ export class LoadGraphService {
 
   nodesData$ = this.nodesData.asObservable();
 
-  constructor(private http: HttpClient) {}
+  constructor(
+    private http: HttpClient,
+    private loadingService: LoadingService
+  ) {}
 
   getAllNodes(pageIndex = 0, category = '') {
+    this.loadingService.setLoading(true);
     const pageSize = 10;
 
     this.http
@@ -32,6 +37,7 @@ export class LoadGraphService {
   }
 
   getNodeInfo(id: string) {
+    this.loadingService.setLoading(true);
     return this.http.get<unknown>(
       this.apiUrl + '/GetNodeInformation?headerUniqueId=' + id,
       {
@@ -41,6 +47,7 @@ export class LoadGraphService {
   }
 
   getGraph(id: string) {
+    this.loadingService.setLoading(true);
     return this.http.get<Graph>(
       this.apiUrl + '/GetRelationalEdgeByNodeName?nodeId=' + id,
       {
diff --git a/src/app/shared/components/danger-success-notification/danger-success-notification.component.spec.ts b/src/app/shared/components/danger-success-notification/danger-success-notification.component.spec.ts
new file mode 100644
index 0000000..d1e6207
--- /dev/null
+++ b/src/app/shared/components/danger-success-notification/danger-success-notification.component.spec.ts
@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { DangerSuccessNotificationComponent } from './danger-success-notification.component';
+
+describe('DangerSuccessNotificationComponent', () => {
+  let component: DangerSuccessNotificationComponent;
+  let fixture: ComponentFixture<DangerSuccessNotificationComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [DangerSuccessNotificationComponent]
+    })
+    .compileComponents();
+
+    fixture = TestBed.createComponent(DangerSuccessNotificationComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/src/app/user/components/dashboard/manage-users/user-manage-notification/user-manage-notification.component.ts b/src/app/shared/components/danger-success-notification/danger-success-notification.component.ts
similarity index 72%
rename from src/app/user/components/dashboard/manage-users/user-manage-notification/user-manage-notification.component.ts
rename to src/app/shared/components/danger-success-notification/danger-success-notification.component.ts
index a7ba1d6..25ae8fa 100644
--- a/src/app/user/components/dashboard/manage-users/user-manage-notification/user-manage-notification.component.ts
+++ b/src/app/shared/components/danger-success-notification/danger-success-notification.component.ts
@@ -2,7 +2,7 @@ import { Component, Inject } from '@angular/core';
 import { MAT_SNACK_BAR_DATA } from '@angular/material/snack-bar';
 
 @Component({
-  selector: 'app-user-manage-notification',
+  selector: 'app-danger-success-notification',
   template: ` <span matSnackBarLabel>{{ this.userData }}</span> `,
 
   styles: `
@@ -12,9 +12,9 @@ import { MAT_SNACK_BAR_DATA } from '@angular/material/snack-bar';
     }
   `,
 })
-export class UserManageNotificationComponent {
+export class DangerSuccessNotificationComponent {
   constructor(
     @Inject(MAT_SNACK_BAR_DATA)
-    protected userData: string,
+    protected userData: string
   ) {}
 }
diff --git a/src/app/shared/components/dashboard-header/dashboard-header.component.ts b/src/app/shared/components/dashboard-header/dashboard-header.component.ts
index 25bffaf..a9d142c 100644
--- a/src/app/shared/components/dashboard-header/dashboard-header.component.ts
+++ b/src/app/shared/components/dashboard-header/dashboard-header.component.ts
@@ -2,6 +2,8 @@ import { AfterViewInit, Component, Input } from '@angular/core';
 import { ThemeService } from '../../services/theme.service';
 import { MatSnackBar } from '@angular/material/snack-bar';
 import { AuthService } from '../../../user/services/auth/auth.service';
+import { DangerSuccessNotificationComponent } from '../danger-success-notification/danger-success-notification.component';
+import { LoadingService } from '../../services/loading.service';
 
 @Component({
   selector: 'app-dashboard-header',
@@ -15,19 +17,28 @@ export class DashboardHeaderComponent implements AfterViewInit {
   constructor(
     private themeService: ThemeService,
     private _snackBar: MatSnackBar,
-    private authService: AuthService
+    private authService: AuthService,
+    private loadingService: LoadingService
   ) {}
 
   ngAfterViewInit(): void {
-    this.authService
-      .getPermissions()
-      .subscribe(
-        (data) =>
-          (this.profilePic =
-            data?.image == 'default-image-url' || !data?.image
-              ? 'empty-profile.png'
-              : data?.image)
-      );
+    this.authService.getPermissions().subscribe({
+      next: (data) => {
+        this.profilePic =
+          data?.image == 'default-image-url' || !data?.image
+            ? 'empty-profile.png'
+            : data?.image;
+        this.loadingService.setLoading(false);
+      },
+      error: (error) => {
+        this._snackBar.openFromComponent(DangerSuccessNotificationComponent, {
+          data: error.error.message,
+          panelClass: ['notification-class-danger'],
+          duration: 2000,
+        });
+        this.loadingService.setLoading(false);
+      },
+    });
   }
 
   changeTheme() {
diff --git a/src/app/shared/services/loading.service.spec.ts b/src/app/shared/services/loading.service.spec.ts
new file mode 100644
index 0000000..dd3193c
--- /dev/null
+++ b/src/app/shared/services/loading.service.spec.ts
@@ -0,0 +1,16 @@
+import { TestBed } from '@angular/core/testing';
+
+import { LoadingService } from './loading.service';
+
+describe('LoadingService', () => {
+  let service: LoadingService;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({});
+    service = TestBed.inject(LoadingService);
+  });
+
+  it('should be created', () => {
+    expect(service).toBeTruthy();
+  });
+});
diff --git a/src/app/shared/services/loading.service.ts b/src/app/shared/services/loading.service.ts
new file mode 100644
index 0000000..94f71fd
--- /dev/null
+++ b/src/app/shared/services/loading.service.ts
@@ -0,0 +1,14 @@
+import { Injectable } from '@angular/core';
+import { BehaviorSubject } from 'rxjs';
+
+@Injectable({
+  providedIn: 'root',
+})
+export class LoadingService {
+  private readonly loading = new BehaviorSubject<boolean>(false);
+  loading$ = this.loading.asObservable();
+
+  setLoading(state: boolean) {
+    this.loading.next(state);
+  }
+}
diff --git a/src/app/shared/shared.module.ts b/src/app/shared/shared.module.ts
index 5bf8597..387e33a 100644
--- a/src/app/shared/shared.module.ts
+++ b/src/app/shared/shared.module.ts
@@ -6,11 +6,21 @@ import { MatIconModule } from '@angular/material/icon';
 import { ThemeService } from './services/theme.service';
 import { AppRoutingModule } from '../app-routing.module';
 import { MatTooltipModule } from '@angular/material/tooltip';
+import { LoadingService } from './services/loading.service';
+import { DangerSuccessNotificationComponent } from './components/danger-success-notification/danger-success-notification.component';
 
 @NgModule({
-  declarations: [CardComponent, DashboardHeaderComponent],
+  declarations: [
+    CardComponent,
+    DashboardHeaderComponent,
+    DangerSuccessNotificationComponent,
+  ],
   imports: [CommonModule, MatIconModule, AppRoutingModule, MatTooltipModule],
-  providers: [ThemeService],
-  exports: [CardComponent, DashboardHeaderComponent],
+  providers: [ThemeService, LoadingService],
+  exports: [
+    CardComponent,
+    DashboardHeaderComponent,
+    DangerSuccessNotificationComponent,
+  ],
 })
 export class SharedModule {}
diff --git a/src/app/user/components/dashboard/dashboard.component.ts b/src/app/user/components/dashboard/dashboard.component.ts
index d5375e3..ad0e63d 100644
--- a/src/app/user/components/dashboard/dashboard.component.ts
+++ b/src/app/user/components/dashboard/dashboard.component.ts
@@ -1,6 +1,7 @@
 import { Component } from '@angular/core';
 import { AuthService } from '../../services/auth/auth.service';
 import { Router } from '@angular/router';
+import { LoadingService } from '../../../shared/services/loading.service';
 
 /** @title Responsive sidenav */
 @Component({
@@ -12,9 +13,13 @@ export class DashboardComponent {
   constructor(
     private authService: AuthService,
     private router: Router,
-  ) {}
+    private loadingService: LoadingService
+  ) {
+    this.loadingService.setLoading(false);
+  }
 
   logoutClick() {
+    this.loadingService.setLoading(true);
     this.authService.logout().subscribe(() => {
       this.router.navigate(['/login']);
     });
diff --git a/src/app/user/components/dashboard/main-page/main-page.component.ts b/src/app/user/components/dashboard/main-page/main-page.component.ts
index d0425e6..56b9514 100644
--- a/src/app/user/components/dashboard/main-page/main-page.component.ts
+++ b/src/app/user/components/dashboard/main-page/main-page.component.ts
@@ -1,5 +1,8 @@
 import { AfterContentInit, Component } from '@angular/core';
 import { AuthService } from '../../../services/auth/auth.service';
+import { LoadingService } from '../../../../shared/services/loading.service';
+import { DangerSuccessNotificationComponent } from '../../../../shared/components/danger-success-notification/danger-success-notification.component';
+import { MatSnackBar } from '@angular/material/snack-bar';
 
 @Component({
   selector: 'app-main-page',
@@ -9,13 +12,27 @@ import { AuthService } from '../../../services/auth/auth.service';
 export class MainPageComponent implements AfterContentInit {
   fullName!: string;
 
-  constructor(private authService: AuthService) {}
+  constructor(
+    private authService: AuthService,
+    private loadingService: LoadingService,
+    private _snackBar: MatSnackBar
+  ) {}
 
   ngAfterContentInit(): void {
-    this.authService
-      .getPermissions()
-      .subscribe(
-        (data) => (this.fullName = `${data?.firstName} ${data?.lastName}`),
-      );
+    this.loadingService.setLoading(false);
+    this.authService.getPermissions().subscribe({
+      next: (data) => {
+        this.fullName = `${data?.firstName} ${data?.lastName}`;
+        this.loadingService.setLoading(false);
+      },
+      error: (error) => {
+        this._snackBar.openFromComponent(DangerSuccessNotificationComponent, {
+          data: error.error.message,
+          panelClass: ['notification-class-danger'],
+          duration: 2000,
+        });
+        this.loadingService.setLoading(false);
+      },
+    });
   }
 }
diff --git a/src/app/user/components/dashboard/manage-users/add-user/add-user.component.html b/src/app/user/components/dashboard/manage-users/add-user/add-user.component.html
index 612a180..5c75636 100644
--- a/src/app/user/components/dashboard/manage-users/add-user/add-user.component.html
+++ b/src/app/user/components/dashboard/manage-users/add-user/add-user.component.html
@@ -77,11 +77,11 @@ <h3 class="title">Add User</h3>
       formControlName="roleName"
     >
       <mat-radio-button name="role" value="admin">Admin</mat-radio-button>
-      <mat-radio-button name="role" value="dataManager"
+      <mat-radio-button name="role" value="datamanager"
         >Data Manager</mat-radio-button
       >
-      <mat-radio-button name="role" value="systemManager"
-        >System Manager</mat-radio-button
+      <mat-radio-button name="role" value="dataanalyst"
+        >Data Analyst</mat-radio-button
       >
     </mat-radio-group>
     <div class="submit-button-container">
diff --git a/src/app/user/components/dashboard/manage-users/edit-user/edit-user.component.html b/src/app/user/components/dashboard/manage-users/edit-user/edit-user.component.html
index 90af001..d13492a 100644
--- a/src/app/user/components/dashboard/manage-users/edit-user/edit-user.component.html
+++ b/src/app/user/components/dashboard/manage-users/edit-user/edit-user.component.html
@@ -56,12 +56,12 @@ <h3 class="title">Edit User</h3>
       formControlName="roleName"
     >
       <mat-radio-button name="role" value="admin">Admin</mat-radio-button>
-      <mat-radio-button name="role" value="dataManager"
-        >Data Manager
-      </mat-radio-button>
-      <mat-radio-button name="role" value="systemManager"
-        >System Manager
-      </mat-radio-button>
+      <mat-radio-button name="role" value="datamanager"
+        >Data Manager</mat-radio-button
+      >
+      <mat-radio-button name="role" value="dataanalyst"
+        >Data Analyst</mat-radio-button
+      >
     </mat-radio-group>
     <div class="submit-button-container">
       <button type="submit" mat-flat-button class="mat-elevation-z5">
diff --git a/src/app/user/components/dashboard/manage-users/manage-users.component.ts b/src/app/user/components/dashboard/manage-users/manage-users.component.ts
index cd14ef6..f3ececc 100644
--- a/src/app/user/components/dashboard/manage-users/manage-users.component.ts
+++ b/src/app/user/components/dashboard/manage-users/manage-users.component.ts
@@ -10,7 +10,8 @@ import { UserDeleteConfirmationComponent } from './user-delete-confirmation/user
 import { AdminService } from '../../../services/admin/admin.service';
 import { MatSnackBar } from '@angular/material/snack-bar';
 import { EditUserComponent } from './edit-user/edit-user.component';
-import { UserManageNotificationComponent } from './user-manage-notification/user-manage-notification.component';
+import { LoadingService } from '../../../../shared/services/loading.service';
+import { DangerSuccessNotificationComponent } from '../../../../shared/components/danger-success-notification/danger-success-notification.component';
 
 @Component({
   selector: 'app-manage-users',
@@ -41,17 +42,31 @@ export class ManageUsersComponent implements OnInit {
     private readonly dialog: MatDialog,
     private adminService: AdminService,
     private _snackBar: MatSnackBar,
-  ) {}
+    private loadingService: LoadingService
+  ) {
+    this.loadingService.setLoading(false);
+  }
 
   ngOnInit(): void {
-    this.adminService.usersData$.subscribe((res: GetUserResponse) => {
-      this.usersData = res.users;
-      this.length = res.count;
-      this.pageIndex = res.thisPage;
+    this.adminService.usersData$.subscribe({
+      next: (res: GetUserResponse) => {
+        this.usersData = res.users;
+        this.length = res.count;
+        this.pageIndex = res.thisPage;
+        this.loadingService.setLoading(false);
+      },
+      error: (error) => {
+        this._snackBar.openFromComponent(DangerSuccessNotificationComponent, {
+          data: error.error.message,
+          panelClass: ['notification-class-danger'],
+          duration: 2000,
+        });
+        this.loadingService.setLoading(false);
+      },
     });
 
     this.adminService.notification$.subscribe((data) => {
-      this._snackBar.openFromComponent(UserManageNotificationComponent, {
+      this._snackBar.openFromComponent(DangerSuccessNotificationComponent, {
         data: data.message,
         panelClass: data.status
           ? ['notification-class-success']
diff --git a/src/app/user/components/dashboard/manage-users/user-delete-confirmation/user-delete-confirmation.component.ts b/src/app/user/components/dashboard/manage-users/user-delete-confirmation/user-delete-confirmation.component.ts
index 1b1de79..ff3b7d5 100644
--- a/src/app/user/components/dashboard/manage-users/user-delete-confirmation/user-delete-confirmation.component.ts
+++ b/src/app/user/components/dashboard/manage-users/user-delete-confirmation/user-delete-confirmation.component.ts
@@ -32,14 +32,14 @@ export class UserDeleteConfirmationComponent {
       pagSize: number;
       pageIndex: number;
     },
-    private adminService: AdminService,
+    private adminService: AdminService
   ) {}
 
   deleteUser() {
     this.adminService.deleteUser(
       this.pageData.user.guid,
       this.pageData.pagSize,
-      this.pageData.pageIndex,
+      this.pageData.pageIndex
     );
   }
 }
diff --git a/src/app/user/components/dashboard/manage-users/user-manage-notification/user-manage-notification.component.spec.ts b/src/app/user/components/dashboard/manage-users/user-manage-notification/user-manage-notification.component.spec.ts
deleted file mode 100644
index 539a58d..0000000
--- a/src/app/user/components/dashboard/manage-users/user-manage-notification/user-manage-notification.component.spec.ts
+++ /dev/null
@@ -1,23 +0,0 @@
-import { ComponentFixture, TestBed } from '@angular/core/testing';
-
-import { UserManageNotificationComponent } from './user-manage-notification.component';
-
-describe('UserManageNotificationComponent', () => {
-  let component: UserManageNotificationComponent;
-  let fixture: ComponentFixture<UserManageNotificationComponent>;
-
-  beforeEach(async () => {
-    await TestBed.configureTestingModule({
-      declarations: [UserManageNotificationComponent]
-    })
-    .compileComponents();
-
-    fixture = TestBed.createComponent(UserManageNotificationComponent);
-    component = fixture.componentInstance;
-    fixture.detectChanges();
-  });
-
-  it('should create', () => {
-    expect(component).toBeTruthy();
-  });
-});
diff --git a/src/app/user/components/login/login.component.ts b/src/app/user/components/login/login.component.ts
index 76cb990..d635478 100644
--- a/src/app/user/components/login/login.component.ts
+++ b/src/app/user/components/login/login.component.ts
@@ -11,7 +11,8 @@ import { Router } from '@angular/router';
 import { LoginRequest } from '../../models/User';
 import { ThemeService } from '../../../shared/services/theme.service';
 import { MatSnackBar } from '@angular/material/snack-bar';
-import { UserManageNotificationComponent } from '../dashboard/manage-users/user-manage-notification/user-manage-notification.component';
+import { LoadingService } from '../../../shared/services/loading.service';
+import { DangerSuccessNotificationComponent } from '../../../shared/components/danger-success-notification/danger-success-notification.component';
 
 @Component({
   selector: 'app-login',
@@ -31,8 +32,11 @@ export class LoginComponent implements AfterViewInit {
     private authService: AuthService,
     private router: Router,
     private themeService: ThemeService,
-    private _snackBar: MatSnackBar
-  ) {}
+    private _snackBar: MatSnackBar,
+    private loadingService: LoadingService
+  ) {
+    this.loadingService.setLoading(false);
+  }
 
   changeTheme() {
     this.themeService.changeThemeState();
@@ -53,6 +57,7 @@ export class LoginComponent implements AfterViewInit {
 
   loginClick() {
     this.isLoading = true;
+    this.loadingService.setLoading(true);
     const loginRequest: LoginRequest = {
       username: this.username,
       password: this.password,
@@ -60,8 +65,7 @@ export class LoginComponent implements AfterViewInit {
     };
     this.authService.login(loginRequest).subscribe({
       next: () => {
-        this.isLoading = false;
-        this._snackBar.openFromComponent(UserManageNotificationComponent, {
+        this._snackBar.openFromComponent(DangerSuccessNotificationComponent, {
           data: 'Logged in successfully.',
           panelClass: ['notification-class-success'],
           duration: 2000,
@@ -70,7 +74,8 @@ export class LoginComponent implements AfterViewInit {
       },
       error: (error) => {
         this.isLoading = false;
-        this._snackBar.openFromComponent(UserManageNotificationComponent, {
+        this.loadingService.setLoading(false);
+        this._snackBar.openFromComponent(DangerSuccessNotificationComponent, {
           data: error.error.message,
           panelClass: ['notification-class-danger'],
           duration: 2000,
diff --git a/src/app/user/services/admin/admin.service.ts b/src/app/user/services/admin/admin.service.ts
index 5bc65db..bd1d04b 100644
--- a/src/app/user/services/admin/admin.service.ts
+++ b/src/app/user/services/admin/admin.service.ts
@@ -4,6 +4,7 @@ import { RegisterRequest, UpdateUserRequest } from '../../models/User';
 import { GetUserResponse } from '../../interfaces/manage-users.interface';
 import { Subject } from 'rxjs';
 import { environment } from '../../../../../api-config/api-url';
+import { LoadingService } from '../../../shared/services/loading.service';
 
 @Injectable({
   providedIn: 'root',
@@ -16,9 +17,13 @@ export class AdminService {
   usersData$ = this.usersData.asObservable();
   notification$ = this.notification.asObservable();
 
-  constructor(private http: HttpClient) {}
+  constructor(
+    private http: HttpClient,
+    private loadingService: LoadingService
+  ) {}
 
   createUser(request: RegisterRequest, pageSize: number, pageIndex: number) {
+    this.loadingService.setLoading(true);
     return this.http
       .post(`${this.apiUrl}/register`, request, {
         withCredentials: true,
@@ -30,17 +35,20 @@ export class AdminService {
             status: true,
             message: 'User added successfully!',
           });
+          this.loadingService.setLoading(false);
         },
         error: (error) => {
           this.notification.next({
             status: false,
             message: error.error.message,
           });
+          this.loadingService.setLoading(false);
         },
       });
   }
 
   getUsers(limit = 10, page = 0) {
+    this.loadingService.setLoading(true);
     this.http
       .get<GetUserResponse>(
         `${this.apiUrl}/GetUsersPagination?limit=${limit}&page=${page}`,
@@ -48,12 +56,23 @@ export class AdminService {
           withCredentials: true,
         }
       )
-      .subscribe((users) => {
-        this.usersData.next(users);
+      .subscribe({
+        next: (users) => {
+          this.usersData.next(users);
+          this.loadingService.setLoading(false);
+        },
+        error: (error) => {
+          this.notification.next({
+            status: false,
+            message: error.error.message,
+          });
+          this.loadingService.setLoading(false);
+        },
       });
   }
 
   deleteUser(id: string, pageSize: number, pageIndex: number) {
+    this.loadingService.setLoading(true);
     this.http
       .delete(`${this.apiUrl}/DeleteUser?id=${id}`, {
         withCredentials: true,
@@ -65,12 +84,14 @@ export class AdminService {
             status: true,
             message: 'User deleted successfully!',
           });
+          this.loadingService.setLoading(false);
         },
         error: (error) => {
           this.notification.next({
             status: false,
             message: error.error.message,
           });
+          this.loadingService.setLoading(false);
         },
       });
   }
@@ -81,6 +102,7 @@ export class AdminService {
     pageSize: number,
     pageIndex: number
   ) {
+    this.loadingService.setLoading(true);
     return this.http
       .put(`${this.apiUrl}/UpdateUser?id=${id}`, request, {
         withCredentials: true,
@@ -92,12 +114,14 @@ export class AdminService {
             status: true,
             message: 'User updated successfully!',
           });
+          this.loadingService.setLoading(false);
         },
         error: (error) => {
           this.notification.next({
             status: false,
             message: error.error.message,
           });
+          this.loadingService.setLoading(false);
         },
       });
   }
diff --git a/src/app/user/services/auth/auth.service.ts b/src/app/user/services/auth/auth.service.ts
index cd7b0ef..2f76c9a 100644
--- a/src/app/user/services/auth/auth.service.ts
+++ b/src/app/user/services/auth/auth.service.ts
@@ -3,6 +3,7 @@ import { HttpClient } from '@angular/common/http';
 import { BehaviorSubject, Observable, tap } from 'rxjs';
 import { LoginRequest, UserPermissions } from '../../models/User';
 import { environment } from '../../../../../api-config/api-url';
+import { LoadingService } from '../../../shared/services/loading.service';
 
 @Injectable({
   providedIn: 'root',
@@ -12,15 +13,20 @@ export class AuthService {
   private permissions = new BehaviorSubject<UserPermissions | null>(null);
   permissions$ = this.permissions.asObservable();
 
-  constructor(private http: HttpClient) {}
+  constructor(
+    private http: HttpClient,
+    private loadingService: LoadingService
+  ) {}
 
   login(loginRequest: LoginRequest): Observable<void> {
+    this.loadingService.setLoading(true);
     return this.http.post<void>(this.apiUrl + '/login', loginRequest, {
       withCredentials: true,
     });
   }
 
   getPermissions() {
+    this.loadingService.setLoading(true);
     if (!this.permissions.value) {
       return this.http
         .get<UserPermissions>(this.apiUrl + '/permissions', {
@@ -31,19 +37,20 @@ export class AuthService {
             if (response.firstName) {
               this.permissions.next(response);
             }
-          }),
+          })
         );
     }
     return this.permissions$;
   }
 
   logout() {
+    this.loadingService.setLoading(true);
     return this.http
       .post(this.apiUrl + '/logout', null, { withCredentials: true })
       .pipe(
         tap(() => {
           this.permissions.next(null);
-        }),
+        })
       );
   }
 }
diff --git a/src/app/user/services/user/user.service.ts b/src/app/user/services/user/user.service.ts
index dad8b12..c4b0517 100644
--- a/src/app/user/services/user/user.service.ts
+++ b/src/app/user/services/user/user.service.ts
@@ -3,6 +3,7 @@ import { HttpClient } from '@angular/common/http';
 import { Observable } from 'rxjs';
 import { ForgetPasswordRequest, NewPasswordRequest } from '../../models/User';
 import { environment } from '../../../../../api-config/api-url';
+import { LoadingService } from '../../../shared/services/loading.service';
 
 @Injectable({
   providedIn: 'root',
@@ -10,15 +11,20 @@ import { environment } from '../../../../../api-config/api-url';
 export class UserService {
   private apiUrl = environment.apiUrl + '/api/User';
 
-  constructor(private http: HttpClient) {}
+  constructor(
+    private http: HttpClient,
+    private loadingService: LoadingService
+  ) {}
 
   forgetPassword(request: ForgetPasswordRequest): Observable<void> {
+    this.loadingService.setLoading(true);
     return this.http.post<void>(`${this.apiUrl}/reset-password`, request, {
       withCredentials: true,
     });
   }
 
   newPassword(request: NewPasswordRequest): Observable<void> {
+    this.loadingService.setLoading(true);
     return this.http.post<void>(`${this.apiUrl}/new-password`, request, {
       withCredentials: true,
     });
diff --git a/src/app/user/user.module.ts b/src/app/user/user.module.ts
index 0e360e6..e5971cb 100644
--- a/src/app/user/user.module.ts
+++ b/src/app/user/user.module.ts
@@ -29,7 +29,6 @@ import {
   MatDialogTitle,
 } from '@angular/material/dialog';
 import { EditUserComponent } from './components/dashboard/manage-users/edit-user/edit-user.component';
-import { UserManageNotificationComponent } from './components/dashboard/manage-users/user-manage-notification/user-manage-notification.component';
 import { MatSnackBarLabel } from '@angular/material/snack-bar';
 import { AssignFileComponent } from './components/dashboard/assign-file/assign-file.component';
 import { AssignDialogComponent } from './components/dashboard/assign-file/assign-dialog/assign-dialog.component';
@@ -46,7 +45,6 @@ import { MatChipsModule } from '@angular/material/chips';
     ManageUsersComponent,
     UserDeleteConfirmationComponent,
     EditUserComponent,
-    UserManageNotificationComponent,
     AssignFileComponent,
     AssignDialogComponent,
   ],
@@ -77,6 +75,5 @@ import { MatChipsModule } from '@angular/material/chips';
     AsyncPipe,
     MatChipsModule,
   ],
-  exports: [UserManageNotificationComponent],
 })
 export class UserModule {}