From 6397f5261a7822cdf05598b363b9d1abbdf2521c Mon Sep 17 00:00:00 2001 From: Michel Palourdio Date: Sat, 26 May 2018 12:19:32 +0200 Subject: [PATCH 01/21] Feature request : Add minimumDuration option --- README.md | 3 +- .../components/spinner/spinner.component.ts | 28 ++- .../spinner/spinner.component.spec.ts | 170 ++++++++++++++++-- 3 files changed, 183 insertions(+), 18 deletions(-) diff --git a/README.md b/README.md index ec8dd824..db489d1f 100644 --- a/README.md +++ b/README.md @@ -78,12 +78,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 displayed, if needed), the **minimum duration** (ie. how many milliseconds should the spinner be displayed at least): ```xml ``` diff --git a/src/lib/components/spinner/spinner.component.ts b/src/lib/components/spinner/spinner.component.ts index 26980c1e..51d4c0b9 100644 --- a/src/lib/components/spinner/spinner.component.ts +++ b/src/lib/components/spinner/spinner.component.ts @@ -9,7 +9,7 @@ import { Component, Input, OnDestroy, OnInit } from '@angular/core'; import { merge, Observable, Subscription, timer } from 'rxjs'; -import { debounce } from 'rxjs/operators'; +import { debounce, delayWhen, tap } from 'rxjs/operators'; import { PendingInterceptorService } from '../../services/pending-interceptor.service'; import { SpinnerVisibilityService } from '../../services/spinner-visibility.service'; import { Spinkit } from '../../spinkits'; @@ -33,11 +33,19 @@ export class SpinnerComponent implements OnDestroy, OnInit { @Input() public debounceDelay = 0; @Input() + public minimumDuration = 0; + @Input() public entryComponent: any = null; + private startTime: number; + constructor(private pendingInterceptorService: PendingInterceptorService, private spinnerVisibilityService: SpinnerVisibilityService) { this.subscriptions = merge( - this.pendingInterceptorService.pendingRequestsStatus.pipe(debounce(this.handleDebounce.bind(this))), + this.pendingInterceptorService.pendingRequestsStatus.pipe( + debounce(this.handleDebounceDelay.bind(this)), + tap(this.initStartTime.bind(this)), + delayWhen(this.handleMinimumDuration.bind(this)) + ), this.spinnerVisibilityService.visibilityObservable, ) .subscribe(this.handleSpinnerVisibility().bind(this)); @@ -71,11 +79,25 @@ export class SpinnerComponent implements OnDestroy, OnInit { return v => this.isSpinnerVisible = v; } - private handleDebounce(hasPendingRequests: boolean): Observable { + private handleDebounceDelay(hasPendingRequests: boolean): Observable { if (hasPendingRequests) { return timer(this.debounceDelay); } return timer(0); } + + private initStartTime(hasPendingRequests: boolean): void { + if (hasPendingRequests) { + this.startTime = Date.now(); + } + } + + private handleMinimumDuration(hasPendingRequests: boolean): Observable { + if (hasPendingRequests) { + return timer(0); + } + + return timer(this.minimumDuration + this.startTime - Date.now()); + } } diff --git a/src/test/components/spinner/spinner.component.spec.ts b/src/test/components/spinner/spinner.component.spec.ts index 70c7a272..a71e44d4 100644 --- a/src/test/components/spinner/spinner.component.spec.ts +++ b/src/test/components/spinner/spinner.component.spec.ts @@ -9,7 +9,7 @@ import { HttpClient } from '@angular/common/http'; import { HttpClientTestingModule, HttpTestingController } from '@angular/common/http/testing'; -import { async, ComponentFixture, discardPeriodicTasks, fakeAsync, inject, TestBed, tick } from '@angular/core/testing'; +import { async, ComponentFixture, fakeAsync, inject, TestBed, tick } from '@angular/core/testing'; import { By } from '@angular/platform-browser'; import { forkJoin, Observable } from 'rxjs'; import { SpinnerComponent } from '../../../lib/components/spinner/spinner.component'; @@ -222,11 +222,11 @@ describe('SpinnerComponent', () => { tick(999); expect(component.isSpinnerVisible).toBeFalsy(); - // the http request is pending for 2 seconds now - the spinner will be displayed + // the http request is pending for 2 seconds now - the spinner will be visible tick(1); expect(component.isSpinnerVisible).toBeTruthy(); - // the http request is pending for 5 seconds now - the spinner is still displayed + // the http request is pending for 5 seconds now - the spinner is still visible tick(3000); expect(component.isSpinnerVisible).toBeTruthy(); @@ -234,9 +234,6 @@ describe('SpinnerComponent', () => { httpMock.expectOne('/fake').flush({}); tick(); expect(component.isSpinnerVisible).toBeFalsy(); - - // https://github.com/angular/angular/issues/10127 - discardPeriodicTasks(); } ))); @@ -261,20 +258,20 @@ describe('SpinnerComponent', () => { tick(999); expect(component.isSpinnerVisible).toBeFalsy(); - // the http requests are pending for 2 seconds now - the spinner will be displayed + // the http requests are pending for 2 seconds now - the spinner will be visible tick(1); expect(component.isSpinnerVisible).toBeTruthy(); - // the http requests are pending for 5 seconds now - the spinner is still displayed + // the http requests are pending for 5 seconds now - the spinner is still visible tick(3000); expect(component.isSpinnerVisible).toBeTruthy(); - // the first http request is finally over, the spinner is still displayed + // the first http request is finally over, the spinner is still visible firstRequest.flush({}); tick(); expect(component.isSpinnerVisible).toBeTruthy(); - // the second request is pending for 8 seconds now - the spinner is still displayed + // the second request is pending for 8 seconds now - the spinner is still visible tick(3000); expect(component.isSpinnerVisible).toBeTruthy(); @@ -282,9 +279,6 @@ describe('SpinnerComponent', () => { secondRequest.flush({}); tick(); expect(component.isSpinnerVisible).toBeFalsy(); - - // https://github.com/angular/angular/issues/10127 - discardPeriodicTasks(); } ))); @@ -308,13 +302,14 @@ describe('SpinnerComponent', () => { 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 + // this time the spinner is not visible anymore expect(component.isSpinnerVisible).toBeFalsy(); // the bypassPendingInterceptorService should be reset for next http requests @@ -326,4 +321,151 @@ describe('SpinnerComponent', () => { expect(component.isSpinnerVisible).toBeFalsy(); } ))); + + it('should correctly handle the minimum spinner duration for a single http request', fakeAsync(inject( + [HttpClient, HttpTestingController], (http: HttpClient, httpMock: HttpTestingController) => { + component.minimumDuration = 5000; + http.get('/fake').subscribe(); + + // the http request is pending for 1 second now + tick(1000); + expect(component.isSpinnerVisible).toBeTruthy(); + + // the http request is pending for 2 seconds now + tick(1000); + expect(component.isSpinnerVisible).toBeTruthy(); + + // the http request is finally over, the spinner is still visible + httpMock.expectOne('/fake').flush({}); + tick(); + expect(component.isSpinnerVisible).toBeTruthy(); + + // the http request is over but the spinner is still visible after 3 seconds + tick(1000); + expect(component.isSpinnerVisible).toBeTruthy(); + + // the spinner is still visible after 4 seconds + tick(1000); + expect(component.isSpinnerVisible).toBeTruthy(); + + // the spinner is still visible after 4,999 seconds + tick(999); + expect(component.isSpinnerVisible).toBeTruthy(); + + // the spinner is not visible anymore after 5 seconds + tick(1); + expect(component.isSpinnerVisible).toBeFalsy(); + } + ))); + + it('should correctly handle the minimum spinner duration for multiple http requests', fakeAsync(inject( + [HttpClient, HttpTestingController], (http: HttpClient, httpMock: HttpTestingController) => { + component.minimumDuration = 5000; + + function runQuery(url: string): Observable { + return http.get(url); + } + + forkJoin([runQuery('/fake'), runQuery('/fake2')]).subscribe(); + + const firstRequest = httpMock.expectOne('/fake'); + const secondRequest = httpMock.expectOne('/fake2'); + + // the http requests are pending for 1 second now + tick(1000); + expect(component.isSpinnerVisible).toBeTruthy(); + + // the http requests are pending for 2 seconds now + tick(1000); + expect(component.isSpinnerVisible).toBeTruthy(); + + // the first http request is finally over, the spinner is still visible + firstRequest.flush({}); + tick(); + expect(component.isSpinnerVisible).toBeTruthy(); + + // the second http request is still pending after 3 seconds + tick(1000); + expect(component.isSpinnerVisible).toBeTruthy(); + + // the second http request is still pending after 4 seconds + tick(1000); + expect(component.isSpinnerVisible).toBeTruthy(); + + // the second http request is finally over too, the spinner is still visible + secondRequest.flush({}); + tick(); + expect(component.isSpinnerVisible).toBeTruthy(); + + // After 5 seconds, the spinner is hidden + tick(1000); + expect(component.isSpinnerVisible).toBeFalsy(); + } + ))); + + it('should still display the spinner when the minimum duration is inferior to the http request duration', fakeAsync(inject( + [HttpClient, HttpTestingController], (http: HttpClient, httpMock: HttpTestingController) => { + component.minimumDuration = 1000; + http.get('/fake').subscribe(); + + // the http request is pending for 1 second now + tick(1000); + expect(component.isSpinnerVisible).toBeTruthy(); + + // the http request is pending for 2 seconds now + tick(1000); + expect(component.isSpinnerVisible).toBeTruthy(); + + // the http request is finally over after 2 seconds, the spinner is hidden + httpMock.expectOne('/fake').flush({}); + tick(); + expect(component.isSpinnerVisible).toBeFalsy(); + } + ))); + + it('should be possible to set the minimum duration without side effect on manual show/hide', inject( + [SpinnerVisibilityService], (spinner: SpinnerVisibilityService) => { + component.minimumDuration = 10000; + spinner.show(); + expect(component.isSpinnerVisible).toBeTruthy(); + + spinner.hide(); + expect(component.isSpinnerVisible).toBeFalsy(); + } + )); + + it('should be possible to mix debounce delay and minimum duration', fakeAsync(inject( + [HttpClient, HttpTestingController], (http: HttpClient, httpMock: HttpTestingController) => { + // the spinner should not be visible the first second, then visible for 5 seconds + component.minimumDuration = 5000; + component.debounceDelay = 1000; + + http.get('/fake').subscribe(); + + // the http request is pending for 0,5 second now - spinner not visible because debounce + tick(500); + expect(component.isSpinnerVisible).toBeFalsy(); + + // the http request is pending for 1 second now - spinner visible + tick(500); + expect(component.isSpinnerVisible).toBeTruthy(); + + // the http request is finally over, the spinner is still visible + httpMock.expectOne('/fake').flush({}); + tick(); + expect(component.isSpinnerVisible).toBeTruthy(); + + // after 3 seconds, the spinner is still visible + tick(2000); + expect(component.isSpinnerVisible).toBeTruthy(); + + // after 5,999 seconds, the spinner is still visible + tick(2999); + expect(component.isSpinnerVisible).toBeTruthy(); + + // after 6 seconds (1s for debounce + 5s min. duration), the spinner is hidden + tick(1); + expect(component.isSpinnerVisible).toBeFalsy(); + } + ))); }); From e7afb301bf4e2510486f9fb9c119fe497d6087da Mon Sep 17 00:00:00 2001 From: Michel Palourdio Date: Sat, 26 May 2018 12:19:49 +0200 Subject: [PATCH 02/21] Prepare 2.1.0 release --- CHANGELOG.md | 21 +++++++++++++++++++++ package.json | 2 +- 2 files changed, 22 insertions(+), 1 deletion(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 84b17a62..26e944a2 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,5 +1,26 @@ # Changelog +## v2.1.0 + +This release introduces the **minimum duration** option. It gives the possibility to force a minimum duration during which the spinner is visible. +You can mix this parameter with the **debounce time** option : + +```xml + + +``` + +``` +Debounce delay: 100ms +Min. duration time: 300ms +---0ms--------100ms------------180ms-----------400ms-- +----|----------|-----------------|---------------|---- +req starts spinner shows req ends spinner hides +``` + ## v2.0.0 The module bundling now uses [ng-packagr](https://github.com/dherges/ng-packagr). diff --git a/package.json b/package.json index 7de13aa8..4aa55a0d 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "ng-http-loader", - "version": "2.0.0", + "version": "2.1.0", "scripts": { "ng": "ng", "build": "ng build", From 318a69f95f662debeb7a49bfd129b8bfc6516966 Mon Sep 17 00:00:00 2001 From: Michel Palourdio Date: Sat, 26 May 2018 12:28:56 +0200 Subject: [PATCH 03/21] Typo --- CHANGELOG.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 26e944a2..3cd681e9 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -3,7 +3,7 @@ ## v2.1.0 This release introduces the **minimum duration** option. It gives the possibility to force a minimum duration during which the spinner is visible. -You can mix this parameter with the **debounce time** option : +You can mix this parameter with the **debounce delay** option : ```xml Date: Sat, 26 May 2018 13:12:38 +0200 Subject: [PATCH 04/21] Code Style --- .../components/spinner/spinner.component.html | 16 ++++++++-------- src/lib/components/spinner/spinner.component.ts | 5 ++--- 2 files changed, 10 insertions(+), 11 deletions(-) diff --git a/src/lib/components/spinner/spinner.component.html b/src/lib/components/spinner/spinner.component.html index 7019c6c3..d5c1e37b 100644 --- a/src/lib/components/spinner/spinner.component.html +++ b/src/lib/components/spinner/spinner.component.html @@ -3,42 +3,42 @@ diff --git a/src/lib/components/spinner/spinner.component.ts b/src/lib/components/spinner/spinner.component.ts index 51d4c0b9..0ec720af 100644 --- a/src/lib/components/spinner/spinner.component.ts +++ b/src/lib/components/spinner/spinner.component.ts @@ -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() @@ -37,8 +38,6 @@ export class SpinnerComponent implements OnDestroy, OnInit { @Input() public entryComponent: any = null; - private startTime: number; - constructor(private pendingInterceptorService: PendingInterceptorService, private spinnerVisibilityService: SpinnerVisibilityService) { this.subscriptions = merge( this.pendingInterceptorService.pendingRequestsStatus.pipe( From a5a3adc79b77d875f4ecbdf1849b04dabfcc46fa Mon Sep 17 00:00:00 2001 From: Michel Palourdio Date: Sat, 26 May 2018 17:46:08 +0200 Subject: [PATCH 05/21] Use ng-packagr ^3.0.0 stable --- package.json | 2 +- yarn.lock | 22 +++++++++++----------- 2 files changed, 12 insertions(+), 12 deletions(-) diff --git a/package.json b/package.json index 4aa55a0d..9dfbed97 100644 --- a/package.json +++ b/package.json @@ -60,7 +60,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", diff --git a/yarn.lock b/yarn.lock index b09a3cff..590b41a8 100644 --- a/yarn.lock +++ b/yarn.lock @@ -191,9 +191,9 @@ semver "^5.3.0" semver-intersect "^1.1.2" -"@types/estree@0.0.38": - version "0.0.38" - resolved "https://registry.yarnpkg.com/@types/estree/-/estree-0.0.38.tgz#c1be40aa933723c608820a99a373a16d215a1ca2" +"@types/estree@0.0.39": + version "0.0.39" + resolved "https://registry.yarnpkg.com/@types/estree/-/estree-0.0.39.tgz#e177e699ee1b8c22d23174caaa7422644389509f" "@types/jasmine@*", "@types/jasmine@~2.8.6": version "2.8.7" @@ -4354,9 +4354,9 @@ next-tick@1: version "1.0.0" resolved "https://registry.yarnpkg.com/next-tick/-/next-tick-1.0.0.tgz#ca86d1fe8828169b0120208e3dc8424b9db8342c" -ng-packagr@^3.0.0-rc.5: - version "3.0.0-rc.5" - resolved "https://registry.yarnpkg.com/ng-packagr/-/ng-packagr-3.0.0-rc.5.tgz#847aa336e87f4fc7162709c9ebb713988abc2c28" +ng-packagr@^3.0.0: + version "3.0.0" + resolved "https://registry.yarnpkg.com/ng-packagr/-/ng-packagr-3.0.0.tgz#2f59735fcf59352d81a26864970bccbece60402c" dependencies: "@ngtools/json-schema" "^1.1.0" autoprefixer "^8.0.0" @@ -4375,7 +4375,7 @@ ng-packagr@^3.0.0-rc.5: postcss-url "^7.3.0" read-pkg-up "^3.0.0" rimraf "^2.6.1" - rollup "^0.58.0" + rollup "^0.59.0" rollup-plugin-commonjs "^9.1.3" rollup-plugin-node-resolve "^3.0.0" rollup-plugin-sourcemaps "^0.4.2" @@ -5708,11 +5708,11 @@ rollup-pluginutils@^2.0.1: estree-walker "^0.5.2" micromatch "^2.3.11" -rollup@^0.58.0: - version "0.58.2" - resolved "https://registry.yarnpkg.com/rollup/-/rollup-0.58.2.tgz#2feddea8c0c022f3e74b35c48e3c21b3433803ce" +rollup@^0.59.0: + version "0.59.3" + resolved "https://registry.yarnpkg.com/rollup/-/rollup-0.59.3.tgz#15dae74cb1b6a6b39a63c7096c1d6f47d8f2a5bd" dependencies: - "@types/estree" "0.0.38" + "@types/estree" "0.0.39" "@types/node" "*" run-queue@^1.0.0, run-queue@^1.0.3: From 617515cee3c0c3e2661b242da002880f7915b107 Mon Sep 17 00:00:00 2001 From: Michel Palourdio Date: Sat, 26 May 2018 20:21:15 +0200 Subject: [PATCH 06/21] Add 'yarn build' to test the release process on every build --- .travis.yml | 3 +++ 1 file changed, 3 insertions(+) diff --git a/.travis.yml b/.travis.yml index fde2abf9..b5d6388d 100644 --- a/.travis.yml +++ b/.travis.yml @@ -3,3 +3,6 @@ language: node_js node_js: - lts/* - node +script: + - yarn test + - yarn build From 71d5566e43712375beac283d6ea9769429c2db3f Mon Sep 17 00:00:00 2001 From: Michel Palourdio Date: Sat, 26 May 2018 22:09:19 +0200 Subject: [PATCH 07/21] Add coveralls support --- .travis.yml | 3 ++- package.json | 1 + yarn.lock | 22 ++++++++++++++++++++-- 3 files changed, 23 insertions(+), 3 deletions(-) diff --git a/.travis.yml b/.travis.yml index b5d6388d..73556f18 100644 --- a/.travis.yml +++ b/.travis.yml @@ -4,5 +4,6 @@ node_js: - lts/* - node script: - - yarn test + - yarn test --coverage - yarn build + - cat ./coverage/lcov.info | ./node_modules/coveralls/bin/coveralls.js diff --git a/package.json b/package.json index 9dfbed97..3c2882b1 100644 --- a/package.json +++ b/package.json @@ -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", diff --git a/yarn.lock b/yarn.lock index 590b41a8..0cbfd4dc 100644 --- a/yarn.lock +++ b/yarn.lock @@ -1510,6 +1510,16 @@ cosmiconfig@^2.1.0, cosmiconfig@^2.1.1: parse-json "^2.2.0" require-from-string "^1.1.0" +coveralls@^3.0.1: + version "3.0.1" + resolved "https://registry.yarnpkg.com/coveralls/-/coveralls-3.0.1.tgz#12e15914eaa29204e56869a5ece7b9e1492d2ae2" + dependencies: + js-yaml "^3.6.1" + lcov-parse "^0.0.10" + log-driver "^1.2.5" + minimist "^1.2.0" + request "^2.79.0" + cpx@^1.5.0: version "1.5.0" resolved "https://registry.yarnpkg.com/cpx/-/cpx-1.5.0.tgz#185be018511d87270dedccc293171e37655ab88f" @@ -3629,7 +3639,7 @@ js-tokens@^3.0.0, js-tokens@^3.0.2: version "3.0.2" resolved "https://registry.yarnpkg.com/js-tokens/-/js-tokens-3.0.2.tgz#9866df395102130e38f7f996bceb65443209c25b" -js-yaml@3.x, js-yaml@^3.4.3, js-yaml@^3.7.0: +js-yaml@3.x, js-yaml@^3.4.3, js-yaml@^3.6.1, js-yaml@^3.7.0: version "3.11.0" resolved "https://registry.yarnpkg.com/js-yaml/-/js-yaml-3.11.0.tgz#597c1a8bd57152f26d622ce4117851a51f5ebaef" dependencies: @@ -3820,6 +3830,10 @@ lcid@^1.0.0: dependencies: invert-kv "^1.0.0" +lcov-parse@^0.0.10: + version "0.0.10" + resolved "https://registry.yarnpkg.com/lcov-parse/-/lcov-parse-0.0.10.tgz#1b0b8ff9ac9c7889250582b70b71315d9da6d9a3" + leb@^0.3.0: version "0.3.0" resolved "https://registry.yarnpkg.com/leb/-/leb-0.3.0.tgz#32bee9fad168328d6aea8522d833f4180eed1da3" @@ -3941,6 +3955,10 @@ lodash@^4.0.0, lodash@^4.0.1, lodash@^4.15.0, lodash@^4.17.10, lodash@^4.17.3, l version "4.17.10" resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.17.10.tgz#1b7793cf7259ea38fb3661d4d38b3260af8ae4e7" +log-driver@^1.2.5: + version "1.2.7" + resolved "https://registry.yarnpkg.com/log-driver/-/log-driver-1.2.7.tgz#63b95021f0702fedfa2c9bb0a24e7797d71871d8" + log-symbols@^2.1.0: version "2.2.0" resolved "https://registry.yarnpkg.com/log-symbols/-/log-symbols-2.2.0.tgz#5740e1c5d6f0dfda4ad9323b5332107ef6b4c40a" @@ -5525,7 +5543,7 @@ request-progress@^2.0.1: dependencies: throttleit "^1.0.0" -request@2, request@^2.0.0, request@^2.74.0, request@^2.81.0, request@^2.83.0: +request@2, request@^2.0.0, request@^2.74.0, request@^2.79.0, request@^2.81.0, request@^2.83.0: version "2.87.0" resolved "https://registry.yarnpkg.com/request/-/request-2.87.0.tgz#32f00235cd08d482b4d0d68db93a829c0ed5756e" dependencies: From 90a26105ace7dbe3abdc45ade9b123478699494b Mon Sep 17 00:00:00 2001 From: Michel Palourdio Date: Sat, 26 May 2018 22:12:15 +0200 Subject: [PATCH 08/21] Fix coverage argument --- .travis.yml | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/.travis.yml b/.travis.yml index 73556f18..86aa0bb6 100644 --- a/.travis.yml +++ b/.travis.yml @@ -4,6 +4,6 @@ node_js: - lts/* - node script: - - yarn test --coverage + - yarn test --code-coverage - yarn build - cat ./coverage/lcov.info | ./node_modules/coveralls/bin/coveralls.js From 2189ffa211678ebdf3fd5270623840b25def5756 Mon Sep 17 00:00:00 2001 From: Michel Palourdio Date: Sat, 26 May 2018 22:17:13 +0200 Subject: [PATCH 09/21] Run coverage in after_script --- .travis.yml | 2 ++ 1 file changed, 2 insertions(+) diff --git a/.travis.yml b/.travis.yml index 86aa0bb6..c4cd5143 100644 --- a/.travis.yml +++ b/.travis.yml @@ -6,4 +6,6 @@ node_js: script: - yarn test --code-coverage - yarn build + +after_script: - cat ./coverage/lcov.info | ./node_modules/coveralls/bin/coveralls.js From bf0d2e1ed75c51dc3594b0b30a55ff0577d86319 Mon Sep 17 00:00:00 2001 From: Michel Palourdio Date: Sat, 26 May 2018 22:26:57 +0200 Subject: [PATCH 10/21] Add coveralls badge --- README.md | 1 + 1 file changed, 1 insertion(+) diff --git a/README.md b/README.md index db489d1f..e608c860 100644 --- a/README.md +++ b/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) From 7ccc9c83edaeca7c9bd44468831881e09e17938b Mon Sep 17 00:00:00 2001 From: Michel Palourdio Date: Sat, 26 May 2018 22:35:40 +0200 Subject: [PATCH 11/21] Remove branch from badge link --- README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/README.md b/README.md index e608c860..87fef7b7 100644 --- a/README.md +++ b/README.md @@ -1,7 +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) +[![Coverage Status](https://coveralls.io/repos/github/mpalourdio/ng-http-loader/badge.svg)](https://coveralls.io/github/mpalourdio/ng-http-loader) [![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) From 0a7fae65367c8d4a6483e0ea91750253f6f6b2c1 Mon Sep 17 00:00:00 2001 From: Michel Palourdio Date: Sat, 26 May 2018 22:51:30 +0200 Subject: [PATCH 12/21] Revert "Remove branch from badge link" This reverts commit 7ccc9c8 --- README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/README.md b/README.md index 87fef7b7..e608c860 100644 --- a/README.md +++ b/README.md @@ -1,7 +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)](https://coveralls.io/github/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) From fbd5ca59f882519772d39ccc2934b914c9a6e2aa Mon Sep 17 00:00:00 2001 From: Michel Palourdio Date: Sun, 27 May 2018 12:58:04 +0200 Subject: [PATCH 13/21] Refine timer calculation for handleMinimumDuration method --- src/lib/components/spinner/spinner.component.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/lib/components/spinner/spinner.component.ts b/src/lib/components/spinner/spinner.component.ts index 0ec720af..3ced6b3a 100644 --- a/src/lib/components/spinner/spinner.component.ts +++ b/src/lib/components/spinner/spinner.component.ts @@ -97,6 +97,6 @@ export class SpinnerComponent implements OnDestroy, OnInit { return timer(0); } - return timer(this.minimumDuration + this.startTime - Date.now()); + return timer(this.minimumDuration - (Date.now() - this.startTime)); } } From 14486c50ba5bba23bf645a5ca16de506ac84ea4d Mon Sep 17 00:00:00 2001 From: Michel Palourdio Date: Sun, 27 May 2018 17:15:42 +0200 Subject: [PATCH 14/21] Fix potential race concurrency with debounce by returning EMPTY Sanitize handleDebounceDelay + handleMinimumDuration --- .../components/spinner/spinner.component.ts | 22 +++++++++---------- 1 file changed, 10 insertions(+), 12 deletions(-) diff --git a/src/lib/components/spinner/spinner.component.ts b/src/lib/components/spinner/spinner.component.ts index 3ced6b3a..661dfb92 100644 --- a/src/lib/components/spinner/spinner.component.ts +++ b/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, delayWhen, tap } 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'; @@ -42,7 +42,6 @@ export class SpinnerComponent implements OnDestroy, OnInit { this.subscriptions = merge( this.pendingInterceptorService.pendingRequestsStatus.pipe( debounce(this.handleDebounceDelay.bind(this)), - tap(this.initStartTime.bind(this)), delayWhen(this.handleMinimumDuration.bind(this)) ), this.spinnerVisibilityService.visibilityObservable, @@ -79,24 +78,23 @@ export class SpinnerComponent implements OnDestroy, OnInit { } private handleDebounceDelay(hasPendingRequests: boolean): Observable { - if (hasPendingRequests) { + if (hasPendingRequests && !!this.debounceDelay) { return timer(this.debounceDelay); } - return timer(0); + return EMPTY; } - private initStartTime(hasPendingRequests: boolean): void { - if (hasPendingRequests) { + private handleMinimumDuration(hasPendingRequests: boolean): Observable { + if (hasPendingRequests || !this.minimumDuration) { this.startTime = Date.now(); - } - } - private handleMinimumDuration(hasPendingRequests: boolean): Observable { - if (hasPendingRequests) { return timer(0); } - return timer(this.minimumDuration - (Date.now() - this.startTime)); + const timerObservable = timer(this.minimumDuration - (Date.now() - this.startTime)); + this.startTime = null; + + return timerObservable; } } From 2783442abb921ed93d383b534b6b9e8487b90c24 Mon Sep 17 00:00:00 2001 From: Michel Palourdio Date: Sun, 27 May 2018 18:50:31 +0200 Subject: [PATCH 15/21] Explicit return type --- src/lib/components/spinner/spinner.component.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/lib/components/spinner/spinner.component.ts b/src/lib/components/spinner/spinner.component.ts index 661dfb92..b5cee597 100644 --- a/src/lib/components/spinner/spinner.component.ts +++ b/src/lib/components/spinner/spinner.component.ts @@ -77,7 +77,7 @@ export class SpinnerComponent implements OnDestroy, OnInit { return v => this.isSpinnerVisible = v; } - private handleDebounceDelay(hasPendingRequests: boolean): Observable { + private handleDebounceDelay(hasPendingRequests: boolean): Observable { if (hasPendingRequests && !!this.debounceDelay) { return timer(this.debounceDelay); } From 660ef48388a0bffc79f60a31b7ab82fdadc8efdc Mon Sep 17 00:00:00 2001 From: Michel Palourdio Date: Mon, 28 May 2018 09:56:03 +0200 Subject: [PATCH 16/21] Deprecate SpinnerVisibilityService#visibilityObservable and PendingInterceptorService#pendingRequestsStatus --- CHANGELOG.md | 2 ++ src/lib/components/spinner/spinner.component.ts | 4 ++-- src/lib/services/pending-interceptor.service.ts | 5 +++++ src/lib/services/spinner-visibility.service.ts | 5 +++++ src/test/services/pending-interceptor.service.spec.ts | 4 ++-- src/test/services/spinner-visibility.service.spec.ts | 6 +++--- tsconfig.lib.json | 1 - 7 files changed, 19 insertions(+), 8 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 3cd681e9..19ea7942 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -21,6 +21,8 @@ Min. duration time: 300ms req starts spinner shows req ends spinner hides ``` +``SpinnerVisibilityService#visibilityObservable`` and ``PendingInterceptorService#pendingRequestsStatus`` have been deprecated in favor of ``SpinnerVisibilityService#visibilityObservable$`` and ``PendingInterceptorService#pendingRequestsStatus$`` (note the **$** at the end). + ## v2.0.0 The module bundling now uses [ng-packagr](https://github.com/dherges/ng-packagr). diff --git a/src/lib/components/spinner/spinner.component.ts b/src/lib/components/spinner/spinner.component.ts index b5cee597..32472ad1 100644 --- a/src/lib/components/spinner/spinner.component.ts +++ b/src/lib/components/spinner/spinner.component.ts @@ -40,11 +40,11 @@ export class SpinnerComponent implements OnDestroy, OnInit { constructor(private pendingInterceptorService: PendingInterceptorService, private spinnerVisibilityService: SpinnerVisibilityService) { this.subscriptions = merge( - this.pendingInterceptorService.pendingRequestsStatus.pipe( + this.pendingInterceptorService.pendingRequestsStatus$.pipe( debounce(this.handleDebounceDelay.bind(this)), delayWhen(this.handleMinimumDuration.bind(this)) ), - this.spinnerVisibilityService.visibilityObservable, + this.spinnerVisibilityService.visibilityObservable$, ) .subscribe(this.handleSpinnerVisibility().bind(this)); } diff --git a/src/lib/services/pending-interceptor.service.ts b/src/lib/services/pending-interceptor.service.ts index 8c44faac..4ac6ac19 100644 --- a/src/lib/services/pending-interceptor.service.ts +++ b/src/lib/services/pending-interceptor.service.ts @@ -21,7 +21,12 @@ export class PendingInterceptorService implements HttpInterceptor { private _filteredUrlPatterns: RegExp[] = []; private _forceByPass: boolean; + /** @deprecated Deprecated in favor of pendingRequestsStatus$ */ get pendingRequestsStatus(): Observable { + return this.pendingRequestsStatus$; + } + + get pendingRequestsStatus$(): Observable { return this._pendingRequestsStatus.asObservable(); } diff --git a/src/lib/services/spinner-visibility.service.ts b/src/lib/services/spinner-visibility.service.ts index ffee64fe..c87fd226 100644 --- a/src/lib/services/spinner-visibility.service.ts +++ b/src/lib/services/spinner-visibility.service.ts @@ -20,7 +20,12 @@ export class SpinnerVisibilityService { constructor(private pendingInterceptorService: PendingInterceptorService) { } + /** @deprecated Deprecated in favor of visibilityObservable$ */ get visibilityObservable(): Observable { + return this.visibilityObservable$; + } + + get visibilityObservable$(): Observable { return this._visibilitySubject.asObservable(); } diff --git a/src/test/services/pending-interceptor.service.spec.ts b/src/test/services/pending-interceptor.service.spec.ts index f08903ca..e945287e 100644 --- a/src/test/services/pending-interceptor.service.spec.ts +++ b/src/test/services/pending-interceptor.service.spec.ts @@ -55,7 +55,7 @@ describe('PendingInterceptorService', () => { inject( [PendingInterceptorService, HttpClient, HttpTestingController], (service: PendingInterceptorService, http: HttpClient, httpMock: HttpTestingController) => { - const pendingRequestsStatus = service.pendingRequestsStatus; + const pendingRequestsStatus = service.pendingRequestsStatus$; pendingRequestsStatus .subscribe( @@ -75,7 +75,7 @@ describe('PendingInterceptorService', () => { http.get('/fake').subscribe(); httpMock.expectOne('/fake'); - const pendingRequestsStatus = service.pendingRequestsStatus; + const pendingRequestsStatus = service.pendingRequestsStatus$; pendingRequestsStatus .subscribe( (next: boolean) => expect(next).toBeTruthy(), diff --git a/src/test/services/spinner-visibility.service.spec.ts b/src/test/services/spinner-visibility.service.spec.ts index d3610a65..6df0330c 100644 --- a/src/test/services/spinner-visibility.service.spec.ts +++ b/src/test/services/spinner-visibility.service.spec.ts @@ -23,12 +23,12 @@ describe('SpinnerVisibilityService', () => { })); it('should define a subject', inject([SpinnerVisibilityService], (service: SpinnerVisibilityService) => { - expect(service.visibilityObservable).toBeTruthy(); + expect(service.visibilityObservable$).toBeTruthy(); })); it('should pipe \'true\' when calling show()', inject([SpinnerVisibilityService], (spinner: SpinnerVisibilityService) => { spinner.show(); - spinner.visibilityObservable.subscribe(result => { + spinner.visibilityObservable$.subscribe(result => { expect(result).toBeTruthy(); }, error => { @@ -38,7 +38,7 @@ describe('SpinnerVisibilityService', () => { it('should pipe \'false\' when calling hide()', inject([SpinnerVisibilityService], (spinner: SpinnerVisibilityService) => { spinner.hide(); - spinner.visibilityObservable.subscribe(result => { + spinner.visibilityObservable$.subscribe(result => { expect(result).toBeFalsy(); }, error => { diff --git a/tsconfig.lib.json b/tsconfig.lib.json index d2f948b5..7c5da68f 100644 --- a/tsconfig.lib.json +++ b/tsconfig.lib.json @@ -9,7 +9,6 @@ "importHelpers": true, "noImplicitAny": true, "noImplicitReturns": true, - "removeComments": true, "types": [], "lib": [ "dom", From 55cb49441c70ba9377a9b83f213339b5bc784f38 Mon Sep 17 00:00:00 2001 From: Michel Palourdio Date: Mon, 28 May 2018 11:07:42 +0200 Subject: [PATCH 17/21] Tweak for coverage decrease :D --- src/lib/services/pending-interceptor.service.ts | 4 ++-- src/lib/services/spinner-visibility.service.ts | 4 ++-- 2 files changed, 4 insertions(+), 4 deletions(-) diff --git a/src/lib/services/pending-interceptor.service.ts b/src/lib/services/pending-interceptor.service.ts index 4ac6ac19..b9ec81f5 100644 --- a/src/lib/services/pending-interceptor.service.ts +++ b/src/lib/services/pending-interceptor.service.ts @@ -23,11 +23,11 @@ export class PendingInterceptorService implements HttpInterceptor { /** @deprecated Deprecated in favor of pendingRequestsStatus$ */ get pendingRequestsStatus(): Observable { - return this.pendingRequestsStatus$; + return this._pendingRequestsStatus.asObservable(); } get pendingRequestsStatus$(): Observable { - return this._pendingRequestsStatus.asObservable(); + return this.pendingRequestsStatus; } get pendingRequests(): number { diff --git a/src/lib/services/spinner-visibility.service.ts b/src/lib/services/spinner-visibility.service.ts index c87fd226..b12e766b 100644 --- a/src/lib/services/spinner-visibility.service.ts +++ b/src/lib/services/spinner-visibility.service.ts @@ -22,11 +22,11 @@ export class SpinnerVisibilityService { /** @deprecated Deprecated in favor of visibilityObservable$ */ get visibilityObservable(): Observable { - return this.visibilityObservable$; + return this._visibilitySubject.asObservable(); } get visibilityObservable$(): Observable { - return this._visibilitySubject.asObservable(); + return this.visibilityObservable; } public show(): void { From 126a4a4a546bc3819b54445fd3b9bfc0a5b3d1ae Mon Sep 17 00:00:00 2001 From: Michel Palourdio Date: Mon, 28 May 2018 13:37:32 +0200 Subject: [PATCH 18/21] Rename minimumDuration to minDuration --- CHANGELOG.md | 2 +- README.md | 4 ++-- src/lib/components/spinner/spinner.component.ts | 10 +++++----- src/test/components/spinner/spinner.component.spec.ts | 10 +++++----- 4 files changed, 13 insertions(+), 13 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 19ea7942..cae2b61b 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -8,7 +8,7 @@ You can mix this parameter with the **debounce delay** option : ```xml ``` diff --git a/README.md b/README.md index e608c860..8dcb89c5 100644 --- a/README.md +++ b/README.md @@ -84,8 +84,8 @@ You can customize the **background-color**, the **spinner type**, the **debounce ``` diff --git a/src/lib/components/spinner/spinner.component.ts b/src/lib/components/spinner/spinner.component.ts index 32472ad1..59440610 100644 --- a/src/lib/components/spinner/spinner.component.ts +++ b/src/lib/components/spinner/spinner.component.ts @@ -34,7 +34,7 @@ export class SpinnerComponent implements OnDestroy, OnInit { @Input() public debounceDelay = 0; @Input() - public minimumDuration = 0; + public minDuration = 0; @Input() public entryComponent: any = null; @@ -42,7 +42,7 @@ export class SpinnerComponent implements OnDestroy, OnInit { this.subscriptions = merge( this.pendingInterceptorService.pendingRequestsStatus$.pipe( debounce(this.handleDebounceDelay.bind(this)), - delayWhen(this.handleMinimumDuration.bind(this)) + delayWhen(this.handleMinDuration.bind(this)) ), this.spinnerVisibilityService.visibilityObservable$, ) @@ -85,14 +85,14 @@ export class SpinnerComponent implements OnDestroy, OnInit { return EMPTY; } - private handleMinimumDuration(hasPendingRequests: boolean): Observable { - if (hasPendingRequests || !this.minimumDuration) { + private handleMinDuration(hasPendingRequests: boolean): Observable { + if (hasPendingRequests || !this.minDuration) { this.startTime = Date.now(); return timer(0); } - const timerObservable = timer(this.minimumDuration - (Date.now() - this.startTime)); + const timerObservable = timer(this.minDuration - (Date.now() - this.startTime)); this.startTime = null; return timerObservable; diff --git a/src/test/components/spinner/spinner.component.spec.ts b/src/test/components/spinner/spinner.component.spec.ts index a71e44d4..636d1503 100644 --- a/src/test/components/spinner/spinner.component.spec.ts +++ b/src/test/components/spinner/spinner.component.spec.ts @@ -324,7 +324,7 @@ describe('SpinnerComponent', () => { it('should correctly handle the minimum spinner duration for a single http request', fakeAsync(inject( [HttpClient, HttpTestingController], (http: HttpClient, httpMock: HttpTestingController) => { - component.minimumDuration = 5000; + component.minDuration = 5000; http.get('/fake').subscribe(); // the http request is pending for 1 second now @@ -360,7 +360,7 @@ describe('SpinnerComponent', () => { it('should correctly handle the minimum spinner duration for multiple http requests', fakeAsync(inject( [HttpClient, HttpTestingController], (http: HttpClient, httpMock: HttpTestingController) => { - component.minimumDuration = 5000; + component.minDuration = 5000; function runQuery(url: string): Observable { return http.get(url); @@ -405,7 +405,7 @@ describe('SpinnerComponent', () => { it('should still display the spinner when the minimum duration is inferior to the http request duration', fakeAsync(inject( [HttpClient, HttpTestingController], (http: HttpClient, httpMock: HttpTestingController) => { - component.minimumDuration = 1000; + component.minDuration = 1000; http.get('/fake').subscribe(); // the http request is pending for 1 second now @@ -425,7 +425,7 @@ describe('SpinnerComponent', () => { it('should be possible to set the minimum duration without side effect on manual show/hide', inject( [SpinnerVisibilityService], (spinner: SpinnerVisibilityService) => { - component.minimumDuration = 10000; + component.minDuration = 10000; spinner.show(); expect(component.isSpinnerVisible).toBeTruthy(); @@ -437,7 +437,7 @@ describe('SpinnerComponent', () => { it('should be possible to mix debounce delay and minimum duration', fakeAsync(inject( [HttpClient, HttpTestingController], (http: HttpClient, httpMock: HttpTestingController) => { // the spinner should not be visible the first second, then visible for 5 seconds - component.minimumDuration = 5000; + component.minDuration = 5000; component.debounceDelay = 1000; http.get('/fake').subscribe(); From 84df95c3344f1bcf0452f84ea7fc2cc8a6bb7d48 Mon Sep 17 00:00:00 2001 From: Michel Palourdio Date: Mon, 28 May 2018 22:11:05 +0200 Subject: [PATCH 19/21] Polish changelog and readme --- CHANGELOG.md | 2 +- README.md | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index cae2b61b..e1d3e8b7 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -21,7 +21,7 @@ Min. duration time: 300ms req starts spinner shows req ends spinner hides ``` -``SpinnerVisibilityService#visibilityObservable`` and ``PendingInterceptorService#pendingRequestsStatus`` have been deprecated in favor of ``SpinnerVisibilityService#visibilityObservable$`` and ``PendingInterceptorService#pendingRequestsStatus$`` (note the **$** at the end). +``SpinnerVisibilityService#visibilityObservable`` and ``PendingInterceptorService#pendingRequestsStatus`` have been respectively deprecated in favor of ``visibilityObservable$`` and ``pendingRequestsStatus$`` (note the **$**). ## v2.0.0 diff --git a/README.md b/README.md index 8dcb89c5..3707ac5a 100644 --- a/README.md +++ b/README.md @@ -79,7 +79,7 @@ In your app.component.html, simply add : ## Customizing the spinner -You can customize the **background-color**, the **spinner type**, the **debounce delay** (ie. after how many milliseconds the spinner will be displayed, if needed), the **minimum duration** (ie. how many milliseconds should the spinner be displayed at least): +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 Date: Mon, 28 May 2018 22:12:15 +0200 Subject: [PATCH 20/21] Polish changelog and readme (again) --- CHANGELOG.md | 3 +-- README.md | 3 +-- 2 files changed, 2 insertions(+), 4 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index e1d3e8b7..601f64b5 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -8,8 +8,7 @@ You can mix this parameter with the **debounce delay** option : ```xml + [minDuration]="300"> ``` diff --git a/README.md b/README.md index 3707ac5a..45743c5c 100644 --- a/README.md +++ b/README.md @@ -85,8 +85,7 @@ You can customize the **background-color**, the **spinner type**, the **debounce [backgroundColor]="'#ff0000'" [spinner]="spinkit.skWave" [debounceDelay]="100" - [minDuration]="300" -> + [minDuration]="300"> ``` From 41f61355a0cf016cd51622e518221a509268dbb0 Mon Sep 17 00:00:00 2001 From: Michel Palourdio Date: Mon, 28 May 2018 22:12:51 +0200 Subject: [PATCH 21/21] is => should be --- CHANGELOG.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 601f64b5..9ffbdf25 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -2,7 +2,7 @@ ## v2.1.0 -This release introduces the **minimum duration** option. It gives the possibility to force a minimum duration during which the spinner is visible. +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