Merge pull request #27 from mpalourdio/debounce

Debounce Delay. Fixes #25 && #26

Author: mpalourdio

CHANGELOG.MD

@@ -1,3 +1,15 @@
+# Changelog
+
+## v0.6.0
+
+This release adds the ``debounceDelay`` parameter (default is 0). It allows to discard the spinner for fast and repeated http requests, which can be annoying under some conditions.
+
+See [customization](https://github.com/mpalourdio/ng-http-loader#customizing-the-spinner)
+
+The library footprint has been reduced by minifying templates and stylesheets before inlining them.
+
+The library now takes advantage of [RxJS lettable operators](https://github.com/ReactiveX/rxjs/blob/master/doc/lettable-operators.md)
+
 ## v0.5.1
 
 This release fixes a bug that could cause the spinner to not show if an http request were performed **before** the spinner component was initialized.  

README.MD

@@ -17,27 +17,23 @@ $ npm install ng-http-loader --save
 ## What does it do ?
 
 This package provides an HTTP Interceptor, and a spinner component (All from [SpinKit](https://github.com/tobiasahlin/SpinKit) at the moment).
-The HTTP interceptor listens to all HTTP requests and shows a spinner during pending requests.
+The HTTP interceptor listens to all HTTP requests and shows a spinner / loader indicator during pending http requests.
 
 ## Angular 4 / Angular 5
 
-The latest compatible module version with angular 4 is **``0.3.4``**.
-If you want to use Angular 5, use **``^0.5.0``**.
+The latest module version compatible with angular 4 is **``0.3.4``**.
+If you want to use Angular 5, use versions **``0.4.0``** and above.
 
 If you experience errors like below, **please double check the version you use.**
 
 ``ERROR in Error: Metadata version mismatch for module [...]/angular/node_modules/ng-http-loader/ng-http-loader
-  .module.d.ts, found version 4, expected 3, resolving symbol AppModule in [...]/angular/src/app.module.ts``
-  
+  .module.d.ts, found version x, expected y, resolving symbol AppModule in [...]/angular/src/app.module.ts``
 
-## Requirements
+## Requirements - HttpClientModule
 
-Compatible with Angular 4.3+. Performing http requests with the new API from ``HttpClientModule`` is **mandatory**. Otherwise,
-the spinner will not be fired **at all**.
+Performing http requests with the ``HttpClientModule`` API is **mandatory**. Otherwise,the spinner will not be fired **at all**.
 
-## HttpClientModule
-
-All http requests **MUST** be performed with the new ``HttpClientModule`` available from ``angular 4.3``. See this [blog post](http://blog.ninja-squad.com/2017/07/17/http-client-module/) as reference.
+See this [blog post](http://blog.ninja-squad.com/2017/07/17/http-client-module/) for an ``HttpClientModule`` introduction.
 
 ## Usage
 
@@ -93,19 +89,24 @@ import { NgHttpLoaderServicesModule } from 'ng-http-loader/services/ng-http-load
 export class AppModule { }
 ```
 
-In your app.component.html, add :
+In your app.component.html, simply add :
 ```xml
 <spinner></spinner>
 ```
 
 ## Customizing the spinner
 
-You can customize the background-color and the spinner type:
+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):
 ```xml
-<spinner [backgroundColor]="'#ff0000'" [spinner]="spinkit.skWave"></spinner>
+<spinner 
+    [backgroundColor]="'#ff0000'"
+    [spinner]="spinkit.skWave"
+    [debounceDelay]="200"
+>
+</spinner>
 ```
 
-**_To use this syntax, you must reference the ``Spinkit`` const as a public property in you app.component.ts_**:
+**_To use this syntax, you must reference the ``Spinkit`` const as a public property in your app.component.ts_**:
 
 ```typescript
 import { Spinkit } from 'ng-http-loader/spinkits'; <============
@@ -131,13 +132,9 @@ The different spinners available are referenced in [this class](src/spinkits.ts)
 
 ## Requests filtering
 
-You can filter the requests that shouldn't be caught by the interceptor by providing **an array of regex patterns**:
+You can also filter the http requests that shouldn't be caught by the interceptor by providing **an array of regex patterns**:
 ```xml
-<spinner 
-    [backgroundColor]="'#ff0000'"
-    [spinner]="spinkit.skWave"
-    [filteredUrlPatterns]="['\\d', '[a-zA-Z]', 'my-api']">
-</spinner>
+<spinner [filteredUrlPatterns]="['\\d', '[a-zA-Z]', 'my-api']"></spinner>
 ```
 
 ## Misc
@@ -146,4 +143,4 @@ Each Spinkit component defined in [SPINKIT_COMPONENTS](src/spinkits.ts#L30) can
 
 ## Credits
 
-The spinners/loaders have been taken from [SpinKit](https://github.com/tobiasahlin/SpinKit).
+[Tobias Ahlin](https://github.com/tobiasahlin), the awesome creator of [SpinKit](https://github.com/tobiasahlin/SpinKit).

gulpfile.js

@@ -1,16 +1,49 @@
 const inlineNg2Template = require('gulp-inline-ng2-template');
+const htmlMinifier = require('html-minifier');
+const cleanCss = require('clean-css');
 const gulp = require('gulp');
 const clean = require('gulp-clean');
 
 const tmpDir = './tmp';
 const distDir = './dist';
 
+function minifyTemplate(path, ext, file, callback) {
+    try {
+        const minifiedFile = htmlMinifier.minify(file, {
+            collapseWhitespace: true,
+            caseSensitive: true,
+            removeComments: true,
+            removeRedundantAttributes: true,
+            preserveLineBreaks: false,
+        });
+
+        callback(null, minifiedFile);
+    }
+    catch (error) {
+        callback(error);
+    }
+}
+
+function minifyCss(path, ext, file, callback) {
+    try {
+        new cleanCss().minify(file, function (error, output) {
+            callback(null, output.styles);
+        });
+    }
+    catch (error) {
+        callback(error);
+    }
+}
+
 gulp.task('inline-templates', ['clean-tmp'], function () {
     return gulp.src('./src/**/*.ts')
         .pipe(inlineNg2Template({
             base: '/src',
             target: 'es6',
-            useRelativePaths: true
+            useRelativePaths: true,
+            templateProcessor: minifyTemplate,
+            styleProcessor: minifyCss,
+            removeLineBreaks: true,
         }))
         .pipe(gulp.dest(tmpDir));
 });

package.json

@@ -1,6 +1,6 @@
 {
   "name": "ng-http-loader",
-  "version": "0.5.1",
+  "version": "0.6.0",
   "scripts": {
     "prepare-deploy": "gulp inline-templates && gulp clean-dist && ngc -p tsconfig.ngc.json && gulp clean-tmp && gulp copy-all",
     "test": "ng test --watch false"

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

@@ -1,3 +1,12 @@
+/*
+ * 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 { NgModule } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { HttpClientModule } from '@angular/common/http';

src/components/sk-chasing-dots/sk-chasing-dots.component.css

@@ -1,3 +1,24 @@
+/*
+Copyright (c) 2015 Tobias Ahlin
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of
+this software and associated documentation files (the "Software"), to deal in
+the Software without restriction, including without limitation the rights to
+use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of
+the Software, and to permit persons to whom the Software is furnished to do so,
+subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+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.
+*/
+
 .sk-chasing-dots {
     top: 50%;
     margin: auto;

src/components/sk-chasing-dots/sk-chasing-dots.component.html

@@ -1,3 +1,24 @@
+<!--
+Copyright (c) 2015 Tobias Ahlin
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of
+this software and associated documentation files (the "Software"), to deal in
+the Software without restriction, including without limitation the rights to
+use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of
+the Software, and to permit persons to whom the Software is furnished to do so,
+subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+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.
+-->
+
 <div class="sk-chasing-dots" [class.colored]="!backgroundColor">
     <div class="sk-child sk-dot1" [style.background-color]='backgroundColor'></div>
     <div class="sk-child sk-dot2" [style.background-color]='backgroundColor'></div>

src/components/sk-cube-grid/sk-cube-grid.component.css

@@ -1,3 +1,24 @@
+/*
+Copyright (c) 2015 Tobias Ahlin
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of
+this software and associated documentation files (the "Software"), to deal in
+the Software without restriction, including without limitation the rights to
+use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of
+the Software, and to permit persons to whom the Software is furnished to do so,
+subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+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.
+*/
+
 .sk-cube-grid {
     position: relative;
     top: 50%;

src/components/sk-cube-grid/sk-cube-grid.component.html

@@ -1,3 +1,24 @@
+<!--
+Copyright (c) 2015 Tobias Ahlin
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of
+this software and associated documentation files (the "Software"), to deal in
+the Software without restriction, including without limitation the rights to
+use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of
+the Software, and to permit persons to whom the Software is furnished to do so,
+subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+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.
+-->
+
 <div class="sk-cube-grid" [class.colored]="!backgroundColor">
     <div class="sk-cube sk-cube1" [style.background-color]='backgroundColor'></div>
     <div class="sk-cube sk-cube2" [style.background-color]='backgroundColor'></div>

src/components/sk-double-bounce/sk-double-bounce.component.css

@@ -1,3 +1,24 @@
+/*
+Copyright (c) 2015 Tobias Ahlin
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of
+this software and associated documentation files (the "Software"), to deal in
+the Software without restriction, including without limitation the rights to
+use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of
+the Software, and to permit persons to whom the Software is furnished to do so,
+subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+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.
+*/
+
 .sk-double-bounce {
     top: 50%;
     width: 40px;