diff --git a/src/app/app.component.ts b/src/app/app.component.ts index d51395bcc..f40b224ab 100644 --- a/src/app/app.component.ts +++ b/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() {