Merge pull request #66 from mpalourdio/bypass

Prevent the http interceptor from being triggered when using SpinnerVisibilityService. Fixes #64

Author: mpalourdio

CHANGELOG.md

@@ -1,5 +1,10 @@
 # Changelog
 
+## v1.0.1
+
+This release is a bug fix release. It prevents the ``PendingInterceptorService`` from being triggered when using the ``SpinnerVisibilityService``.  
+See this [issue](https://github.com/mpalourdio/ng-http-loader/issues/64) for more details.
+
 ## v1.0.0
 
 This release introduces full support for angular 6 & RxJS 6.

README.md

@@ -32,7 +32,7 @@ If you want to use Angular 5, use versions **``0.4.0``** and above.
 
 The latest compatible version with angular 5 is version **``0.9.1``**.
 
-Versions above **``0.9.1``** are angular 6 / RxJS 6 compatible only.
+From version **``1.0.0``**, the module is angular 6 / RxJS 6 compatible only.
 
 If you experience errors like below, **please double check the version you use.**
 
@@ -154,7 +154,6 @@ You can define your own loader component in place of the built-in ones. The need
 
 You can find some short examples [here](https://gist.github.com/mpalourdio/2c0bec03d610b24ff49db649fbb69a48) and [here](https://gist.github.com/mpalourdio/e05b4495de2abeeecfcf92d70e4ef93e).
 
-
 ## Requests filtering
 
 You can also filter the http requests that shouldn't be caught by the interceptor by providing **an array of regex patterns**:
@@ -166,6 +165,10 @@ You can also filter the http requests that shouldn't be caught by the intercepto
 
 You can manually show and hide the spinner component if needed. You must use the ``SpinnerVisibilityService`` for this purpose.  
 
+Sometimes, when manually showing the spinner, an http request could be performed in background, and when finished, the spinner would automagically disappear.  
+
+**For this reason, when calling ``SpinnerVisibilityService#show()``, it prevents the http interceptor from being triggered unless you explicitly call ``SpinnerVisibilityService#hide()``.**
+
 ```typescript
 import { SpinnerVisibilityService } from 'ng-http-loader/services/spinner-visibility.service';
 
@@ -179,6 +182,9 @@ export class MyComponent {
     constructor(private spinner: SpinnerVisibilityService) {
         // show the spinner
         spinner.show();
+        //////////////
+        // http requests performed between won't have any side effect on the spinner
+        /////////////
         // hide the spinner
         spinner.hide();
     }

package.json

@@ -1,6 +1,6 @@
 {
   "name": "ng-http-loader",
-  "version": "1.0.0",
+  "version": "1.0.1",
   "scripts": {
     "prepare-deploy": "gulp inline-templates && gulp clean-dist && ngc -p tsconfig.ngc.json && gulp clean-tmp && gulp copy-all",
     "test": "ng test"
@@ -18,6 +18,7 @@
     "ng2",
     "ng4",
     "ng5",
+    "ng6",
     "loader",
     "progressbar",
     "spinner",

src/services/pending-interceptor.service.ts

@@ -17,6 +17,7 @@ export class PendingInterceptorService implements HttpInterceptor {
     private _pendingRequests = 0;
     private _pendingRequestsStatus: ReplaySubject<boolean> = new ReplaySubject<boolean>(1);
     private _filteredUrlPatterns: RegExp[] = [];
+    private _forceByPass: boolean;
 
     get pendingRequestsStatus(): Observable<boolean> {
         return this._pendingRequestsStatus.asObservable();
@@ -30,16 +31,20 @@ export class PendingInterceptorService implements HttpInterceptor {
         return this._filteredUrlPatterns;
     }
 
+    set forceByPass(value: boolean) {
+        this._forceByPass = value;
+    }
+
     private shouldBypassUrl(url: string): boolean {
         return this._filteredUrlPatterns.some(e => {
             return e.test(url);
         });
     }
 
     intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
-        const shouldBypassUrl = this.shouldBypassUrl(req.urlWithParams);
+        const shouldBypass = this.shouldBypassUrl(req.urlWithParams) || this._forceByPass;
 
-        if (!shouldBypassUrl) {
+        if (!shouldBypass) {
             this._pendingRequests++;
 
             if (1 === this._pendingRequests) {
@@ -55,7 +60,7 @@ export class PendingInterceptorService implements HttpInterceptor {
                 return throwError(error);
             }),
             finalize(() => {
-                if (!shouldBypassUrl) {
+                if (!shouldBypass) {
                     this._pendingRequests--;
 
                     if (0 === this._pendingRequests) {

src/services/spinner-visibility.service.ts

@@ -9,29 +9,36 @@
 
 import { Injectable } from '@angular/core';
 import { Observable, ReplaySubject } from 'rxjs';
+import { PendingInterceptorService } from './pending-interceptor.service';
 
 @Injectable()
 export class SpinnerVisibilityService {
     private _visibilitySubject: ReplaySubject<boolean> = new ReplaySubject<boolean>(1);
 
+    constructor(private pendingInterceptorService: PendingInterceptorService) {
+    }
+
     get visibilityObservable(): Observable<boolean> {
         return this._visibilitySubject.asObservable();
     }
 
     public show(): void {
+        this.pendingInterceptorService.forceByPass = true;
         this._visibilitySubject.next(true);
     }
 
     public hide(): void {
         this._visibilitySubject.next(false);
+        this.pendingInterceptorService.forceByPass = false;
     }
 }
 
-export function SpinnerVisibilityServiceFactory(): SpinnerVisibilityService {
-    return new SpinnerVisibilityService();
+export function SpinnerVisibilityServiceFactory(pendingInterceptorService: PendingInterceptorService): SpinnerVisibilityService {
+    return new SpinnerVisibilityService(pendingInterceptorService);
 }
 
 export let SpinnerVisibilityServiceFactoryProvider = {
     provide: SpinnerVisibilityService,
-    useFactory: SpinnerVisibilityServiceFactory
+    useFactory: SpinnerVisibilityServiceFactory,
+    deps: [PendingInterceptorService]
 };

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

@@ -296,4 +296,33 @@ describe('SpinnerComponent', () => {
             expect(component.isSpinnerVisible).toBeFalsy();
         }
     ));
+
+    it('should keep the spinner visible even if an http request ends before calling \'hide\'', fakeAsync(inject(
+        [SpinnerVisibilityService, HttpClient, HttpTestingController],
+        (spinner: SpinnerVisibilityService, http: HttpClient, httpMock: HttpTestingController) => {
+            // we manually show the spinner
+            spinner.show();
+            expect(component.isSpinnerVisible).toBeTruthy();
+            // then an http request is performed
+            http.get('/fake').subscribe();
+            tick();
+            expect(component.isSpinnerVisible).toBeTruthy();
+            // the http request ends, but we want the spinner to be still visible
+            httpMock.expectOne('/fake').flush({});
+            tick();
+            expect(component.isSpinnerVisible).toBeTruthy();
+
+            spinner.hide();
+            // this time the spinner is not displayed anymore
+            expect(component.isSpinnerVisible).toBeFalsy();
+
+            // the bypassPendingInterceptorService should be reset for next http requests
+            http.get('/fake2').subscribe();
+            tick();
+            expect(component.isSpinnerVisible).toBeTruthy();
+            httpMock.expectOne('/fake2').flush({});
+            tick();
+            expect(component.isSpinnerVisible).toBeFalsy();
+        }
+    )));
 });

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

@@ -8,13 +8,17 @@
  */
 
 import { inject, TestBed } from '@angular/core/testing';
+import { PendingInterceptorService } from '../../src/services/pending-interceptor.service';
 import { SpinnerVisibilityService } from '../../src/services/spinner-visibility.service';
 
 describe('SpinnerVisibilityService', () => {
 
     beforeEach(() => {
         TestBed.configureTestingModule({
-            providers: [SpinnerVisibilityService]
+            providers: [
+                SpinnerVisibilityService,
+                PendingInterceptorService,
+            ]
         });
     });