Merge pull request #73 from mpalourdio/feature_request37

Minimum duration for spinner visibility. Fixes #37

Author: mpalourdio

.travis.yml

@@ -3,3 +3,9 @@ language: node_js
 node_js:
   - lts/*
   - node
+script:
+  - yarn test --code-coverage
+  - yarn build
+
+after_script:
+  - cat ./coverage/lcov.info | ./node_modules/coveralls/bin/coveralls.js

CHANGELOG.md

@@ -1,5 +1,27 @@
 # Changelog
 
+## v2.1.0
+
+This release introduces the **minimum duration** option. It gives the possibility to force a minimum duration during which the spinner should be visible.
+You can mix this parameter with the **debounce delay** option :
+
+```xml
+<spinner 
+    [debounceDelay]="100"
+    [minDuration]="300">
+</spinner>
+```
+
+```
+Debounce delay: 100ms
+Min. duration time: 300ms
+---0ms--------100ms------------180ms-----------400ms--
+----|----------|-----------------|---------------|---- 
+req starts  spinner shows    req ends     spinner hides
+```
+
+``SpinnerVisibilityService#visibilityObservable`` and ``PendingInterceptorService#pendingRequestsStatus`` have been respectively deprecated in favor of ``visibilityObservable$`` and ``pendingRequestsStatus$`` (note the **$**).
+
 ## v2.0.0
 
 The module bundling now uses [ng-packagr](https://github.com/dherges/ng-packagr).  

README.md

@@ -1,6 +1,7 @@
 # ng-http-loader
 
 [![Build Status](https://travis-ci.org/mpalourdio/ng-http-loader.svg?branch=master)](https://travis-ci.org/mpalourdio/ng-http-loader)
+[![Coverage Status](https://coveralls.io/repos/github/mpalourdio/ng-http-loader/badge.svg?branch=master)](https://coveralls.io/github/mpalourdio/ng-http-loader?branch=master)
 [![npm](https://img.shields.io/npm/v/ng-http-loader.svg)](https://www.npmjs.com/package/ng-http-loader)
 [![npm](https://img.shields.io/npm/dm/ng-http-loader.svg)](https://www.npmjs.com/package/ng-http-loader)
 
@@ -78,13 +79,13 @@ In your app.component.html, simply add :
 
 ## Customizing the spinner
 
-You can customize the **background-color**, the **spinner type** and the **debounce delay** (ie. after how many milliseconds the spinner will be displayed, if needed):
+You can customize the **background-color**, the **spinner type**, the **debounce delay** (ie. after how many milliseconds the spinner will be visible, if needed), the **minimum duration** (ie. how many milliseconds should the spinner be visible at least):
 ```xml
 <spinner 
     [backgroundColor]="'#ff0000'"
     [spinner]="spinkit.skWave"
-    [debounceDelay]="200"
->
+    [debounceDelay]="100"
+    [minDuration]="300">
 </spinner>
 ```
 

package.json

@@ -1,6 +1,6 @@
 {
   "name": "ng-http-loader",
-  "version": "2.0.0",
+  "version": "2.1.0",
   "scripts": {
     "ng": "ng",
     "build": "ng build",
@@ -52,6 +52,7 @@
     "@types/node": "~8.9.4",
     "codelyzer": "~4.2.1",
     "core-js": "^2.5.4",
+    "coveralls": "^3.0.1",
     "jasmine-core": "~2.99.1",
     "jasmine-spec-reporter": "~4.2.1",
     "karma": "~2.0.0",
@@ -60,7 +61,7 @@
     "karma-jasmine": "~1.1.1",
     "karma-jasmine-html-reporter": "^0.2.2",
     "karma-phantomjs-launcher": "^1.0.4",
-    "ng-packagr": "^3.0.0-rc.5",
+    "ng-packagr": "^3.0.0",
     "phantomjs-prebuilt": "^2.1.14",
     "rxjs": "^6.0.0",
     "ts-node": "~5.0.1",

src/lib/components/spinner/spinner.component.html

@@ -3,42 +3,42 @@
     <ng-container *ngComponentOutlet="entryComponent"></ng-container>
 
     <sk-cube-grid
-        *ngIf="spinner === Spinkit.skCubeGrid"
+        *ngIf="spinner === spinkit.skCubeGrid"
         [backgroundColor]="backgroundColor">
     </sk-cube-grid>
 
     <sk-chasing-dots
-        *ngIf="spinner === Spinkit.skChasingDots"
+        *ngIf="spinner === spinkit.skChasingDots"
         [backgroundColor]="backgroundColor">
     </sk-chasing-dots>
 
     <sk-double-bounce
-        *ngIf="spinner === Spinkit.skDoubleBounce"
+        *ngIf="spinner === spinkit.skDoubleBounce"
         [backgroundColor]="backgroundColor">
     </sk-double-bounce>
 
     <sk-rotating-plane
-        *ngIf="spinner === Spinkit.skRotatingPlane"
+        *ngIf="spinner === spinkit.skRotatingPlane"
         [backgroundColor]="backgroundColor">
     </sk-rotating-plane>
 
     <sk-spinner-pulse
-        *ngIf="spinner === Spinkit.skSpinnerPulse"
+        *ngIf="spinner === spinkit.skSpinnerPulse"
         [backgroundColor]="backgroundColor">
     </sk-spinner-pulse>
 
     <sk-three-bounce
-        *ngIf="spinner === Spinkit.skThreeBounce"
+        *ngIf="spinner === spinkit.skThreeBounce"
         [backgroundColor]="backgroundColor">
     </sk-three-bounce>
 
     <sk-wandering-cubes
-        *ngIf="spinner === Spinkit.skWanderingCubes"
+        *ngIf="spinner === spinkit.skWanderingCubes"
         [backgroundColor]="backgroundColor">
     </sk-wandering-cubes>
 
     <sk-wave
-        *ngIf="spinner === Spinkit.skWave"
+        *ngIf="spinner === spinkit.skWave"
         [backgroundColor]="backgroundColor">
     </sk-wave>
 

src/lib/components/spinner/spinner.component.ts

@@ -8,8 +8,8 @@
  */
 
 import { Component, Input, OnDestroy, OnInit } from '@angular/core';
-import { merge, Observable, Subscription, timer } from 'rxjs';
-import { debounce } from 'rxjs/operators';
+import { EMPTY, merge, Observable, Subscription, timer } from 'rxjs';
+import { debounce, delayWhen } from 'rxjs/operators';
 import { PendingInterceptorService } from '../../services/pending-interceptor.service';
 import { SpinnerVisibilityService } from '../../services/spinner-visibility.service';
 import { Spinkit } from '../../spinkits';
@@ -21,9 +21,10 @@ import { Spinkit } from '../../spinkits';
 })
 export class SpinnerComponent implements OnDestroy, OnInit {
     public isSpinnerVisible: boolean;
+    public spinkit = Spinkit;
     private subscriptions: Subscription;
+    private startTime: number;
 
-    public Spinkit = Spinkit;
     @Input()
     public backgroundColor: string;
     @Input()
@@ -33,12 +34,17 @@ export class SpinnerComponent implements OnDestroy, OnInit {
     @Input()
     public debounceDelay = 0;
     @Input()
+    public minDuration = 0;
+    @Input()
     public entryComponent: any = null;
 
     constructor(private pendingInterceptorService: PendingInterceptorService, private spinnerVisibilityService: SpinnerVisibilityService) {
         this.subscriptions = merge(
-            this.pendingInterceptorService.pendingRequestsStatus.pipe(debounce(this.handleDebounce.bind(this))),
-            this.spinnerVisibilityService.visibilityObservable,
+            this.pendingInterceptorService.pendingRequestsStatus$.pipe(
+                debounce(this.handleDebounceDelay.bind(this)),
+                delayWhen(this.handleMinDuration.bind(this))
+            ),
+            this.spinnerVisibilityService.visibilityObservable$,
         )
             .subscribe(this.handleSpinnerVisibility().bind(this));
     }
@@ -71,11 +77,24 @@ export class SpinnerComponent implements OnDestroy, OnInit {
         return v => this.isSpinnerVisible = v;
     }
 
-    private handleDebounce(hasPendingRequests: boolean): Observable<number> {
-        if (hasPendingRequests) {
+    private handleDebounceDelay(hasPendingRequests: boolean): Observable<number | never> {
+        if (hasPendingRequests && !!this.debounceDelay) {
             return timer(this.debounceDelay);
         }
 
-        return timer(0);
+        return EMPTY;
+    }
+
+    private handleMinDuration(hasPendingRequests: boolean): Observable<number> {
+        if (hasPendingRequests || !this.minDuration) {
+            this.startTime = Date.now();
+
+            return timer(0);
+        }
+
+        const timerObservable = timer(this.minDuration - (Date.now() - this.startTime));
+        this.startTime = null;
+
+        return timerObservable;
     }
 }

src/lib/services/pending-interceptor.service.ts

@@ -21,10 +21,15 @@ export class PendingInterceptorService implements HttpInterceptor {
     private _filteredUrlPatterns: RegExp[] = [];
     private _forceByPass: boolean;
 
+    /** @deprecated Deprecated in favor of pendingRequestsStatus$ */
     get pendingRequestsStatus(): Observable<boolean> {
         return this._pendingRequestsStatus.asObservable();
     }
 
+    get pendingRequestsStatus$(): Observable<boolean> {
+        return this.pendingRequestsStatus;
+    }
+
     get pendingRequests(): number {
         return this._pendingRequests;
     }

src/lib/services/spinner-visibility.service.ts

@@ -20,10 +20,15 @@ export class SpinnerVisibilityService {
     constructor(private pendingInterceptorService: PendingInterceptorService) {
     }
 
+    /** @deprecated Deprecated in favor of visibilityObservable$ */
     get visibilityObservable(): Observable<boolean> {
         return this._visibilitySubject.asObservable();
     }
 
+    get visibilityObservable$(): Observable<boolean> {
+        return this.visibilityObservable;
+    }
+
     public show(): void {
         this.pendingInterceptorService.forceByPass = true;
         this._visibilitySubject.next(true);