(@fuse/loading-bar) Separated the service and interceptor from the component, updated its docs

src/@fuse/components/loading-bar/loading-bar.component.ts

@@ -1,8 +1,8 @@
 import { Component, Input, OnChanges, OnDestroy, OnInit, SimpleChanges, ViewEncapsulation } from '@angular/core';
 import { coerceBooleanProperty } from '@angular/cdk/coercion';
-import { FuseLoadingBarService } from '@fuse/components/loading-bar/loading-bar.service';
 import { takeUntil } from 'rxjs/operators';
 import { Subject } from 'rxjs';
+import { FuseLoadingService } from '@fuse/services/loading';
 
 @Component({
     selector     : 'fuse-loading-bar',
@@ -22,7 +22,7 @@ export class FuseLoadingBarComponent implements OnChanges, OnInit, OnDestroy
     /**
      * Constructor
      */
-    constructor(private _fuseLoadingBarService: FuseLoadingBarService)
+    constructor(private _fuseLoadingService: FuseLoadingService)
     {
     }
 
@@ -41,7 +41,7 @@ export class FuseLoadingBarComponent implements OnChanges, OnInit, OnDestroy
         if ( 'autoMode' in changes )
         {
             // Set the auto mode in the service
-            this._fuseLoadingBarService.setAutoMode(coerceBooleanProperty(changes.autoMode.currentValue));
+            this._fuseLoadingService.setAutoMode(coerceBooleanProperty(changes.autoMode.currentValue));
         }
     }
 
@@ -51,19 +51,19 @@ export class FuseLoadingBarComponent implements OnChanges, OnInit, OnDestroy
     ngOnInit(): void
     {
         // Subscribe to the service
-        this._fuseLoadingBarService.mode$
+        this._fuseLoadingService.mode$
             .pipe(takeUntil(this._unsubscribeAll))
             .subscribe((value) => {
                 this.mode = value;
             });
 
-        this._fuseLoadingBarService.progress$
+        this._fuseLoadingService.progress$
             .pipe(takeUntil(this._unsubscribeAll))
             .subscribe((value) => {
                 this.progress = value;
             });
 
-        this._fuseLoadingBarService.show$
+        this._fuseLoadingService.show$
             .pipe(takeUntil(this._unsubscribeAll))
             .subscribe((value) => {
                 this.show = value;

src/@fuse/components/loading-bar/loading-bar.module.ts

@@ -1,9 +1,7 @@
 import { NgModule } from '@angular/core';
 import { CommonModule } from '@angular/common';
-import { HTTP_INTERCEPTORS } from '@angular/common/http';
 import { MatProgressBarModule } from '@angular/material/progress-bar';
 import { FuseLoadingBarComponent } from '@fuse/components/loading-bar/loading-bar.component';
-import { FuseLoadingBarInterceptor } from '@fuse/components/loading-bar/loading-bar.interceptor';
 
 @NgModule({
     declarations: [
@@ -15,13 +13,6 @@ import { FuseLoadingBarInterceptor } from '@fuse/components/loading-bar/loading-
     ],
     exports     : [
         FuseLoadingBarComponent
-    ],
-    providers   : [
-        {
-            provide : HTTP_INTERCEPTORS,
-            useClass: FuseLoadingBarInterceptor,
-            multi   : true
-        }
     ]
 })
 export class FuseLoadingBarModule

src/@fuse/components/loading-bar/public-api.ts

@@ -1,3 +1,2 @@
 export * from '@fuse/components/loading-bar/loading-bar.component';
-export * from '@fuse/components/loading-bar/loading-bar.service';
 export * from '@fuse/components/loading-bar/loading-bar.module';

src/@fuse/fuse.module.ts

@@ -2,6 +2,7 @@ import { NgModule, Optional, SkipSelf } from '@angular/core';
 import { MATERIAL_SANITY_CHECKS } from '@angular/material/core';
 import { MAT_FORM_FIELD_DEFAULT_OPTIONS } from '@angular/material/form-field';
 import { FuseConfirmationModule } from '@fuse/services/confirmation';
+import { FuseLoadingModule } from '@fuse/services/loading';
 import { FuseMediaWatcherModule } from '@fuse/services/media-watcher/media-watcher.module';
 import { FuseSplashScreenModule } from '@fuse/services/splash-screen/splash-screen.module';
 import { FuseTailwindConfigModule } from '@fuse/services/tailwind/tailwind.module';
@@ -10,6 +11,7 @@ import { FuseUtilsModule } from '@fuse/services/utils/utils.module';
 @NgModule({
     imports  : [
         FuseConfirmationModule,
+        FuseLoadingModule,
         FuseMediaWatcherModule,
         FuseSplashScreenModule,
         FuseTailwindConfigModule,

src/@fuse/services/loading/index.ts

@@ -0,0 +1 @@
+export * from '@fuse/services/loading/public-api';

src/@fuse/services/loading/loading.interceptor.ts

@@ -2,10 +2,10 @@ import { Injectable } from '@angular/core';
 import { HttpEvent, HttpHandler, HttpInterceptor, HttpRequest } from '@angular/common/http';
 import { Observable } from 'rxjs';
 import { finalize } from 'rxjs/operators';
-import { FuseLoadingBarService } from '@fuse/components/loading-bar/loading-bar.service';
+import { FuseLoadingService } from '@fuse/services/loading/loading.service';
 
 @Injectable()
-export class FuseLoadingBarInterceptor implements HttpInterceptor
+export class FuseLoadingInterceptor implements HttpInterceptor
 {
     handleRequestsAutomatically: boolean;
 
@@ -13,11 +13,11 @@ export class FuseLoadingBarInterceptor implements HttpInterceptor
      * Constructor
      */
     constructor(
-        private _fuseLoadingBarService: FuseLoadingBarService
+        private _fuseLoadingService: FuseLoadingService
     )
     {
         // Subscribe to the auto
-        this._fuseLoadingBarService.auto$
+        this._fuseLoadingService.auto$
             .subscribe((value) => {
                 this.handleRequestsAutomatically = value;
             });
@@ -38,12 +38,12 @@ export class FuseLoadingBarInterceptor implements HttpInterceptor
         }
 
         // Set the loading status to true
-        this._fuseLoadingBarService._setLoadingStatus(true, req.url);
+        this._fuseLoadingService._setLoadingStatus(true, req.url);
 
         return next.handle(req).pipe(
             finalize(() => {
                 // Set the status to false if there are any errors or the request is completed
-                this._fuseLoadingBarService._setLoadingStatus(false, req.url);
+                this._fuseLoadingService._setLoadingStatus(false, req.url);
             }));
     }
 }

src/@fuse/services/loading/loading.module.ts

@@ -0,0 +1,16 @@
+import { NgModule } from '@angular/core';
+import { HTTP_INTERCEPTORS } from '@angular/common/http';
+import { FuseLoadingInterceptor } from '@fuse/services/loading/loading.interceptor';
+
+@NgModule({
+    providers: [
+        {
+            provide : HTTP_INTERCEPTORS,
+            useClass: FuseLoadingInterceptor,
+            multi   : true
+        }
+    ]
+})
+export class FuseLoadingModule
+{
+}

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

@@ -5,7 +5,7 @@ import { BehaviorSubject, Observable } from 'rxjs';
 @Injectable({
     providedIn: 'root'
 })
-export class FuseLoadingBarService
+export class FuseLoadingService
 {
     private _auto$: BehaviorSubject<boolean> = new BehaviorSubject<boolean>(true);
     private _mode$: BehaviorSubject<'determinate' | 'indeterminate'> = new BehaviorSubject<'determinate' | 'indeterminate'>('indeterminate');

src/@fuse/services/loading/public-api.ts

@@ -0,0 +1,2 @@
+export * from '@fuse/services/loading/loading.service';
+export * from '@fuse/services/loading/loading.module';

src/app/modules/admin/ui/fuse-components/components/loading-bar/loading-bar.component.html

@@ -94,7 +94,7 @@
 
         <h2>Service</h2>
         <p>
-            <code>FuseLoadingBarService</code> can be injected to control the loading bar from anywhere.
+            <code>FuseLoadingService</code> can be injected to control the loading bar from anywhere.
         </p>
         <div class="bg-card rounded shadow mt-4">
             <div class="px-6 py-3 font-mono text-secondary border-b">
@@ -208,7 +208,7 @@
                         /**
                          * Constructor
                          */
-                        constructor( private _fuseLoadingBarService: FuseLoadingBarService ) { }
+                        constructor( private _fuseLoadingService: FuseLoadingService ) { }
 
                         ...
 
@@ -217,7 +217,7 @@
                          */
                         showLoadingBar(): void
                         {
-                            this._fuseLoadingBarService.show();
+                            this._fuseLoadingService.show();
                         }
 
                         /**
@@ -225,7 +225,7 @@
                          */
                         hideLoadingBar(): void
                         {
-                            this._fuseLoadingBarService.hide();
+                            this._fuseLoadingService.hide();
                         }
                     </textarea>
                     <!-- @formatter:on -->
@@ -317,7 +317,7 @@
                          */
                         constructor(
                             private _httpClient: HttpClient,
-                            private _fuseLoadingBarService: FuseLoadingBarService
+                            private _fuseLoadingService: FuseLoadingService
                         )
                         { }
 
@@ -330,7 +330,7 @@
                          */
                         setAutoMode(change: MatSlideToggleChange): void
                         {
-                            this._fuseLoadingBarService.setAutoMode(change.checked);
+                            this._fuseLoadingService.setAutoMode(change.checked);
                         }
 
                         /**
@@ -440,7 +440,7 @@
                         /**
                          * Constructor
                          */
-                        constructor( private _fuseLoadingBarService: FuseLoadingBarService ) { }
+                        constructor( private _fuseLoadingService: FuseLoadingService ) { }
 
                         ...
 
@@ -450,14 +450,14 @@
                         toggleMode(): void
                         {
                             // Show the loading bar
-                            this._fuseLoadingBarService.show();
+                            this._fuseLoadingService.show();
 
                             // Turn off the auto mode
-                            this._fuseLoadingBarService.setAutoMode(false);
+                            this._fuseLoadingService.setAutoMode(false);
 
                             // Set the mode
                             this.mode = this.mode === 'indeterminate' ? 'determinate' : 'indeterminate';
-                            this._fuseLoadingBarService.setMode(this.mode);
+                            this._fuseLoadingService.setMode(this.mode);
                         }
 
                         /**
@@ -467,7 +467,7 @@
                          */
                         setProgress(change: MatSliderChange): void
                         {
-                            this._fuseLoadingBarService.setProgress(change.value);
+                            this._fuseLoadingService.setProgress(change.value);
                         }
                     </textarea>
                     <!-- @formatter:on -->

src/app/modules/admin/ui/fuse-components/components/loading-bar/loading-bar.component.ts

@@ -3,7 +3,7 @@ import { HttpClient } from '@angular/common/http';
 import { MatSliderChange } from '@angular/material/slider';
 import { MatSlideToggleChange } from '@angular/material/slide-toggle';
 import { finalize } from 'rxjs/operators';
-import { FuseLoadingBarService } from '@fuse/components/loading-bar';
+import { FuseLoadingService } from '@fuse/services/loading';
 import { FuseComponentsComponent } from 'app/modules/admin/ui/fuse-components/fuse-components.component';
 
 @Component({
@@ -21,7 +21,7 @@ export class LoadingBarComponent
     constructor(
         private _httpClient: HttpClient,
         private _fuseComponentsComponent: FuseComponentsComponent,
-        private _fuseLoadingBarService: FuseLoadingBarService
+        private _fuseLoadingService: FuseLoadingService
     )
     {
     }
@@ -44,7 +44,7 @@ export class LoadingBarComponent
      */
     showLoadingBar(): void
     {
-        this._fuseLoadingBarService.show();
+        this._fuseLoadingService.show();
     }
 
     /**
@@ -52,7 +52,7 @@ export class LoadingBarComponent
      */
     hideLoadingBar(): void
     {
-        this._fuseLoadingBarService.hide();
+        this._fuseLoadingService.hide();
     }
 
     /**
@@ -62,7 +62,7 @@ export class LoadingBarComponent
      */
     setAutoMode(change: MatSlideToggleChange): void
     {
-        this._fuseLoadingBarService.setAutoMode(change.checked);
+        this._fuseLoadingService.setAutoMode(change.checked);
     }
 
     /**
@@ -87,11 +87,11 @@ export class LoadingBarComponent
     toggleMode(): void
     {
         // Show the loading bar
-        this._fuseLoadingBarService.show();
+        this._fuseLoadingService.show();
 
         // Set the mode
         this.mode = this.mode === 'indeterminate' ? 'determinate' : 'indeterminate';
-        this._fuseLoadingBarService.setMode(this.mode);
+        this._fuseLoadingService.setMode(this.mode);
     }
 
     /**
@@ -101,6 +101,6 @@ export class LoadingBarComponent
      */
     setProgress(change: MatSliderChange): void
     {
-        this._fuseLoadingBarService.setProgress(change.value);
+        this._fuseLoadingService.setProgress(change.value);
     }
 }

src/app/modules/admin/ui/fuse-components/fuse-components.module.ts

@@ -10,11 +10,12 @@ import { MatSliderModule } from '@angular/material/slider';
 import { MatSidenavModule } from '@angular/material/sidenav';
 import { MatTabsModule } from '@angular/material/tabs';
 import { MatTreeModule } from '@angular/material/tree';
+import { FuseAlertModule } from '@fuse/components/alert';
 import { FuseCardModule } from '@fuse/components/card';
 import { FuseDateRangeModule } from '@fuse/components/date-range';
 import { FuseDrawerModule } from '@fuse/components/drawer';
 import { FuseHighlightModule } from '@fuse/components/highlight';
-import { FuseAlertModule } from '@fuse/components/alert';
+import { FuseLoadingBarModule } from '@fuse/components/loading-bar';
 import { FuseMasonryModule } from '@fuse/components/masonry/masonry.module';
 import { FuseNavigationModule } from '@fuse/components/navigation';
 import { FuseScrollResetModule } from '@fuse/directives/scroll-reset';
@@ -79,6 +80,7 @@ import { fuseComponentsRoutes } from 'app/modules/admin/ui/fuse-components/fuse-
         FuseDateRangeModule,
         FuseDrawerModule,
         FuseHighlightModule,
+        FuseLoadingBarModule,
         FuseMasonryModule,
         FuseNavigationModule,
         FuseScrollResetModule,