Merge pull request #694 from GNS3/Handle-router-events-with-progress-service

Handle router events with progress service

src/app/app-routing.module.ts

@@ -149,7 +149,7 @@ const routes: Routes = [
 ];
 
 @NgModule({
-  imports: [RouterModule.forRoot(routes, { anchorScrolling: 'enabled', scrollPositionRestoration: 'enabled'})],
+  imports: [RouterModule.forRoot(routes, { anchorScrolling: 'enabled', enableTracing: true, scrollPositionRestoration: 'enabled'})],
   exports: [RouterModule]
 })
 export class AppRoutingModule {}

src/app/app.component.spec.ts

@@ -8,6 +8,7 @@ import { PersistenceService } from 'angular-persistence';
 import { ElectronService, NgxElectronModule } from 'ngx-electron';
 import createSpyObj = jasmine.createSpyObj;
 import { NO_ERRORS_SCHEMA } from '@angular/core';
+import { ProgressService } from './common/progress/progress.service';
 
 describe('AppComponent', () => {
   let component: AppComponent;
@@ -19,7 +20,7 @@ describe('AppComponent', () => {
     TestBed.configureTestingModule({
       declarations: [AppComponent],
       imports: [RouterTestingModule, MatIconModule, NgxElectronModule],
-      providers: [SettingsService, PersistenceService],
+      providers: [SettingsService, PersistenceService, ProgressService],
       schemas: [NO_ERRORS_SCHEMA]
     }).compileComponents();
 

src/app/app.component.ts

@@ -4,6 +4,8 @@ import { DomSanitizer } from '@angular/platform-browser';
 import { ElectronService } from 'ngx-electron';
 import { SettingsService } from './services/settings.service';
 import { ThemeService } from './services/theme.service';
+import { Router, NavigationStart, NavigationEnd, NavigationCancel, NavigationError } from '@angular/router';
+import { ProgressService } from './common/progress/progress.service';
 
 @Component({
   selector: 'app-root',
@@ -16,10 +18,16 @@ export class AppComponent implements OnInit {
     sanitizer: DomSanitizer,
     private settingsService: SettingsService,
     private electronService: ElectronService,
-    private themeService: ThemeService
+    private themeService: ThemeService,
+    private router: Router,
+    private progressService: ProgressService
   ) {
     iconReg.addSvgIcon('gns3', sanitizer.bypassSecurityTrustResourceUrl('./assets/gns3_icon.svg'));
     iconReg.addSvgIcon('gns3black', sanitizer.bypassSecurityTrustResourceUrl('./assets/gns3_icon_black.svg'));
+
+    router.events.subscribe((value) => {
+      this.checkEvent(value);
+    });
   }
 
   ngOnInit(): void {
@@ -35,4 +43,16 @@ export class AppComponent implements OnInit {
       this.themeService.setDarkMode(true);
     }
   }
+
+  checkEvent(routerEvent) : void {
+    if (routerEvent instanceof NavigationStart) {
+      this.progressService.activate();
+    }
+ 
+    else if (routerEvent instanceof NavigationEnd ||
+             routerEvent instanceof NavigationCancel ||
+             routerEvent instanceof NavigationError) {
+      this.progressService.deactivate();
+    }
+  }
 }