[ENG-9290] P3.4.2 - Add Loading Indicator Across OSF Pages

src/app/app.component.ts

@@ -1,10 +1,17 @@
 import { Actions, createDispatchMap, ofActionSuccessful, select } from '@ngxs/store';
 
-import { filter, take } from 'rxjs';
+import { take, timer } from 'rxjs';
 
 import { ChangeDetectionStrategy, Component, DestroyRef, effect, inject, OnInit } from '@angular/core';
 import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
-import { NavigationEnd, Router, RouterOutlet } from '@angular/router';
+import {
+  NavigationCancel,
+  NavigationEnd,
+  NavigationError,
+  NavigationStart,
+  Router,
+  RouterOutlet,
+} from '@angular/router';
 
 import { ENVIRONMENT } from '@core/provider/environment.provider';
 import { GetCurrentUser } from '@core/store/user';
@@ -14,6 +21,7 @@ import { ConfirmEmailComponent } from './shared/components/confirm-email/confirm
 import { FullScreenLoaderComponent } from './shared/components/full-screen-loader/full-screen-loader.component';
 import { ToastComponent } from './shared/components/toast/toast.component';
 import { CustomDialogService } from './shared/services/custom-dialog.service';
+import { LoaderService } from './shared/services/loader.service';
 
 import { GoogleTagManagerService } from 'angular-google-tag-manager';
 
@@ -32,6 +40,7 @@ export class AppComponent implements OnInit {
   private readonly environment = inject(ENVIRONMENT);
   private readonly actions$ = inject(Actions);
   private readonly actions = createDispatchMap({ getCurrentUser: GetCurrentUser, getEmails: GetEmails });
+  private readonly loaderService = inject(LoaderService);
 
   unverifiedEmails = select(UserEmailsSelectors.getUnverifiedEmails);
 
@@ -50,19 +59,26 @@ export class AppComponent implements OnInit {
       this.actions.getEmails();
     });
 
-    if (this.environment.googleTagManagerId) {
-      this.router.events
-        .pipe(
-          filter((event) => event instanceof NavigationEnd),
-          takeUntilDestroyed(this.destroyRef)
-        )
-        .subscribe((event: NavigationEnd) => {
-          this.googleTagManagerService.pushTag({
-            event: 'page',
-            pageName: event.urlAfterRedirects,
-          });
+    this.router.events.pipe(takeUntilDestroyed(this.destroyRef)).subscribe((event) => {
+      if (event instanceof NavigationStart) {
+        this.loaderService.show();
+      } else if (
+        event instanceof NavigationEnd ||
+        event instanceof NavigationCancel ||
+        event instanceof NavigationError
+      ) {
+        timer(500)
+          .pipe(takeUntilDestroyed(this.destroyRef))
+          .subscribe(() => this.loaderService.hide());
+      }
+
+      if (this.environment.googleTagManagerId && event instanceof NavigationEnd) {
+        this.googleTagManagerService.pushTag({
+          event: 'page',
+          pageName: event.urlAfterRedirects,
         });
-    }
+      }
+    });
   }
 
   private showEmailDialog() {