Merge branch 'master' into skeleton

src/@fuse/fuse.module.ts

@@ -2,6 +2,7 @@ import { ModuleWithProviders, NgModule, Optional, SkipSelf } from '@angular/core
 
 import { FUSE_CONFIG, FuseConfigService } from '@fuse/services/config.service';
 import { FuseCopierService } from '@fuse/services/copier.service';
+import { FuseLoadingBarService } from '@fuse/services/loading-bar.service';
 import { FuseMatchMediaService } from '@fuse/services/match-media.service';
 import { FuseMatSidenavHelperService } from '@fuse/directives/fuse-mat-sidenav/fuse-mat-sidenav.service';
 import { FuseNavigationService } from '@fuse/components/navigation/navigation.service';
@@ -14,6 +15,7 @@ import { FuseTranslationLoaderService } from '@fuse/services/translation-loader.
     providers      : [
         FuseConfigService,
         FuseCopierService,
+        FuseLoadingBarService,
         FuseMatchMediaService,
         FuseMatSidenavHelperService,
         FuseNavigationService,

src/@fuse/services/loading-bar.service.ts

@@ -0,0 +1,89 @@
+import { Injectable } from '@angular/core';
+import { NavigationEnd, NavigationStart, Router } from '@angular/router';
+import { BehaviorSubject, Observable } from 'rxjs';
+import { filter, takeUntil } from 'rxjs/operators';
+
+@Injectable()
+export class FuseLoadingBarService
+{
+    // Private
+    private _visible: BehaviorSubject<boolean>;
+
+    /**
+     * Constructor
+     *
+     * @param {Router} _router
+     */
+    constructor(
+        private _router: Router
+    )
+    {
+        // Initialize the service
+        this._init();
+    }
+
+    // -----------------------------------------------------------------------------------------------------
+    // @ Accessors
+    // -----------------------------------------------------------------------------------------------------
+
+    get visible(): Observable
+    {
+        // Return the _visible as observable
+        return this._visible.asObservable();
+    }
+
+    // -----------------------------------------------------------------------------------------------------
+    // @ Private methods
+    // -----------------------------------------------------------------------------------------------------
+
+    /**
+     * Initialize
+     *
+     * @private
+     */
+    private _init(): void
+    {
+        // Initialize the behavior subject
+        this._visible = new BehaviorSubject(false);
+
+        // Subscribe to the router events to show/hide the loading bar
+        this._router.events
+            .pipe(
+                filter((event) => event instanceof NavigationStart)
+            )
+            .subscribe(() => {
+                this.showLoadingBar();
+            });
+
+        this._router.events
+            .pipe(
+                filter((event) => event instanceof NavigationEnd)
+            )
+            .subscribe(() => {
+                this.hideLoadingBar();
+            });
+    }
+
+    // -----------------------------------------------------------------------------------------------------
+    // @ Public methods
+    // -----------------------------------------------------------------------------------------------------
+
+    /**
+     * Show the loading bar
+     */
+    showLoadingBar(): void
+    {
+        // Show
+        this._visible.next(true);
+    }
+
+    /**
+     * Hide the loading bar
+     */
+    hideLoadingBar(): void
+    {
+        // Hide
+        this._visible.next(false);
+    }
+}
+

src/app/layout/components/toolbar/toolbar.component.ts

@@ -1,7 +1,6 @@
 import { Component, OnDestroy, OnInit } from '@angular/core';
-import { NavigationEnd, NavigationStart, Router } from '@angular/router';
 import { Subject } from 'rxjs';
-import { filter, takeUntil } from 'rxjs/operators';
+import { takeUntil } from 'rxjs/operators';
 import { TranslateService } from '@ngx-translate/core';
 import * as _ from 'lodash';
 
@@ -9,6 +8,7 @@ import { FuseConfigService } from '@fuse/services/config.service';
 import { FuseSidebarService } from '@fuse/components/sidebar/sidebar.service';
 
 import { navigation } from 'app/navigation/navigation';
+import { FuseLoadingBarService } from '@fuse/services/loading-bar.service';
 
 @Component({
     selector   : 'toolbar',
@@ -34,14 +34,14 @@ export class ToolbarComponent implements OnInit, OnDestroy
      * Constructor
      *
      * @param {FuseConfigService} _fuseConfigService
+     * @param {FuseLoadingBarService} _fuseLoadingBarService
      * @param {FuseSidebarService} _fuseSidebarService
-     * @param {Router} _router
      * @param {TranslateService} _translateService
      */
     constructor(
         private _fuseConfigService: FuseConfigService,
+        private _fuseLoadingBarService: FuseLoadingBarService,
         private _fuseSidebarService: FuseSidebarService,
-        private _router: Router,
         private _translateService: TranslateService
     )
     {
@@ -102,22 +102,11 @@ export class ToolbarComponent implements OnInit, OnDestroy
      */
     ngOnInit(): void
     {
-        // Subscribe to the router events to show/hide the loading bar
-        this._router.events
-            .pipe(
-                filter((event) => event instanceof NavigationStart),
-                takeUntil(this._unsubscribeAll)
-            )
-            .subscribe((event) => {
-                this.showLoadingBar = true;
-            });
-
-        this._router.events
-            .pipe(
-                filter((event) => event instanceof NavigationEnd)
-            )
-            .subscribe((event) => {
-                this.showLoadingBar = false;
+        // Subscribe to the Fuse loading bar service
+        this._fuseLoadingBarService.visible
+            .pipe(takeUntil(this._unsubscribeAll))
+            .subscribe((visible) => {
+                this.showLoadingBar = visible;
             });
 
         // Subscribe to the config changes