Add SpinnerVisibilityService to handle spinner toggling manually

Author: mpalourdio

src/components/spinner/spinner.component.ts

@@ -14,6 +14,7 @@ import { PendingInterceptorService } from '../../services/pending-interceptor.se
 import { timer } from 'rxjs/observable/timer';
 import { Observable } from 'rxjs/Observable';
 import { debounce } from 'rxjs/operators';
+import { SpinnerVisibilityService } from '../../services/spinner-visibility.service';
 
 @Component({
     selector: 'spinner',
@@ -22,9 +23,10 @@ import { debounce } from 'rxjs/operators';
 })
 export class SpinnerComponent implements OnDestroy, OnInit {
     public isSpinnerVisible: boolean;
-    private subscription: Subscription;
-    public Spinkit = Spinkit;
+    private pendingSubscription: Subscription;
+    private visibilitySubscription: Subscription;
 
+    public Spinkit = Spinkit;
     @Input()
     public backgroundColor: string;
     @Input()
@@ -36,13 +38,19 @@ export class SpinnerComponent implements OnDestroy, OnInit {
     @Input()
     public entryComponent: any = null;
 
-    constructor(private pendingRequestInterceptorService: PendingInterceptorService) {
-        this.subscription = this.pendingRequestInterceptorService
+    constructor(private pendingInterceptorService: PendingInterceptorService, private spinnerVisibilityService: SpinnerVisibilityService) {
+        this.pendingSubscription = this.pendingInterceptorService
             .pendingRequestsStatus
             .pipe(debounce(this.handleDebounce.bind(this)))
-            .subscribe(hasPendingRequests => {
-                this.isSpinnerVisible = hasPendingRequests;
-            });
+            .subscribe(this.handleSpinnerVisibility().bind(this));
+
+        this.visibilitySubscription = this.spinnerVisibilityService
+            .visibilitySubject
+            .subscribe(this.handleSpinnerVisibility().bind(this));
+    }
+
+    private handleSpinnerVisibility(): (v: boolean) => void {
+        return v => this.isSpinnerVisible = v;
     }
 
     ngOnInit(): void {
@@ -54,7 +62,7 @@ export class SpinnerComponent implements OnDestroy, OnInit {
 
         if (!!this.filteredUrlPatterns.length) {
             this.filteredUrlPatterns.forEach(e => {
-                this.pendingRequestInterceptorService.filteredUrlPatterns.push(new RegExp(e));
+                this.pendingInterceptorService.filteredUrlPatterns.push(new RegExp(e));
             });
         }
     }
@@ -65,9 +73,9 @@ export class SpinnerComponent implements OnDestroy, OnInit {
         }
     }
 
-
     ngOnDestroy(): void {
-        this.subscription.unsubscribe();
+        this.pendingSubscription.unsubscribe();
+        this.visibilitySubscription.unsubscribe();
     }
 
     private handleDebounce(hasPendingRequests: boolean): Observable<number> {

src/services/ng-http-loader-services.module.ts

@@ -11,6 +11,7 @@ import { NgModule } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { HTTP_INTERCEPTORS } from '@angular/common/http';
 import { PendingInterceptorService, PendingInterceptorServiceFactoryProvider } from './pending-interceptor.service';
+import { SpinnerVisibilityServiceFactoryProvider } from './spinner-visibility.service';
 
 const PendingInterceptorServiceExistingProvider = {
     provide: HTTP_INTERCEPTORS,
@@ -25,6 +26,7 @@ const PendingInterceptorServiceExistingProvider = {
     providers: [
         PendingInterceptorServiceExistingProvider,
         PendingInterceptorServiceFactoryProvider,
+        SpinnerVisibilityServiceFactoryProvider,
     ],
 })
 export class NgHttpLoaderServicesModule {

src/services/spinner-visibility.service.ts

@@ -0,0 +1,29 @@
+/*
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS
+ * FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR
+ * COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER
+ * IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
+ * CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+ */
+
+import { Injectable } from '@angular/core';
+import { Subject } from 'rxjs/Subject';
+
+@Injectable()
+export class SpinnerVisibilityService {
+    private _visibilitySubject: Subject<boolean> = new Subject<boolean>();
+
+    get visibilitySubject(): Subject<boolean> {
+        return this._visibilitySubject;
+    }
+}
+
+export function SpinnerVisibilityServiceFactory(): SpinnerVisibilityService {
+    return new SpinnerVisibilityService();
+}
+
+export let SpinnerVisibilityServiceFactoryProvider = {
+    provide: SpinnerVisibilityService,
+    useFactory: SpinnerVisibilityServiceFactory
+};

test/components/spinner/spinner.component.spec.ts

@@ -16,6 +16,7 @@ import { HttpClient } from '@angular/common/http';
 import { HttpClientTestingModule, HttpTestingController } from '@angular/common/http/testing';
 import { NgHttpLoaderServicesModule } from '../../../src/services/ng-http-loader-services.module';
 import 'rxjs/add/observable/forkJoin';
+import { SpinnerVisibilityService } from '../../../src/services/spinner-visibility.service';
 
 describe('SpinnerComponent', () => {
     let component: SpinnerComponent;
@@ -286,4 +287,14 @@ describe('SpinnerComponent', () => {
             discardPeriodicTasks();
         }
     )));
+
+    it('should be possible to manually show/hide the spinner', inject(
+        [SpinnerVisibilityService], (visibilityService: SpinnerVisibilityService) => {
+            visibilityService.visibilitySubject.next(true);
+            expect(component.isSpinnerVisible).toBeTruthy();
+
+            visibilityService.visibilitySubject.next(false);
+            expect(component.isSpinnerVisible).toBeFalsy();
+        }
+    ));
 });

test/services/spinner-visibility.service.spec.ts

@@ -0,0 +1,28 @@
+/*
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS
+ * FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR
+ * COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER
+ * IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
+ * CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+ */
+
+import { inject, TestBed } from '@angular/core/testing';
+import { SpinnerVisibilityService } from '../../src/services/spinner-visibility.service';
+
+describe('SpinnerVisibilityService', () => {
+
+    beforeEach(() => {
+        TestBed.configureTestingModule({
+            providers: [SpinnerVisibilityService]
+        });
+    });
+
+    it('should be created', inject([SpinnerVisibilityService], (service: SpinnerVisibilityService) => {
+        expect(service).toBeTruthy();
+    }));
+
+    it('should define a subject', inject([SpinnerVisibilityService], (service: SpinnerVisibilityService) => {
+        expect(service.visibilitySubject).toBeTruthy();
+    }));
+});