Handle router events with progress service

src/app/app-routing.module.ts

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

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();
+    }
+  }
 }