Comments (18)
I plan to make small changes to support it out of the box.
from ng2-slim-loading-bar.
I already implemented, you just need to override the Http
service, I'll publish it next week!
from ng2-slim-loading-bar.
@akserg can you provide hint on how to make this working , i will fork and do . :)
from ng2-slim-loading-bar.
@akserg any news on this? let me know if we can contribute any help on this.
from ng2-slim-loading-bar.
I use this decorator. It's bad code but it works for now. Feel free to use/modify it for your needs.
`var WithLoadingIndicator = function (timeout = 250) {
return function (target: any, propertyKey: string, descriptor: PropertyDescriptor) {
let originalMethod = descriptor.value;
descriptor.value = function (...args: any[]) {
let interval: NodeJS.Timer;
let to = setTimeout(() => {
slimLoadingBar.start();
interval = setInterval(() => {
if (slimLoadingBar.progress >= 100) {
return;
}
var rnd = 0;
//algorithm from: https://github.com/chieffancypants/angular-loading-bar/blob/master/src/loading-bar.js
var stat = slimLoadingBar.progress;
if (stat >= 0 && stat < 0.25) {
// Start out between 3 - 6% increments
rnd = (Math.random() * (5 - 3 + 1) + 3) / 100;
} else if (stat >= 0.25 && stat < 0.65) {
// increment between 0 - 3%
rnd = (Math.random() * 3) / 100;
} else if (stat >= 0.65 && stat < 0.9) {
// increment between 0 - 2%
rnd = (Math.random() * 2) / 100;
} else if (stat >= 0.9 && stat < 0.99) {
// finally, increment it .5 %
rnd = 0.005;
} else {
// after 99%, don't increment:
rnd = 0;
}
slimLoadingBar.progress = slimLoadingBar.progress + rnd * 100;
}, 250);
}, timeout);
let result: Observable<any> = originalMethod.apply(this, args); // run and store the result
return result.map((x) => {
clearTimeout(to);
if (interval) {
clearInterval(interval);
slimLoadingBar.complete();
}
return x;
}).catch((error, caught) => {
clearTimeout(to);
if (interval) {
clearInterval(interval);
slimLoadingBar.complete();
}
return Observable.throw(error);
}); // return the result of the original method
};
return descriptor;
};
}
`
from ng2-slim-loading-bar.
see https://github.com/aitboudad/ng-loading-bar
from ng2-slim-loading-bar.
This will be a good implementation
from ng2-slim-loading-bar.
@akserg Any milestone for this? Would be a great plugin if it can work like: automatic loading bar
from ng2-slim-loading-bar.
What if we write custom http client and start loading bar there (for every get,post,put, delete requests). Left to invent where finish loading bar.
from ng2-slim-loading-bar.
Anyone have any ideas how to do it? I can do it, but i don't know where to start :(
from ng2-slim-loading-bar.
Where you publish ?
from ng2-slim-loading-bar.
@aitboudad Very nice, just added and it work perfectly. It'll be nice to added some properties to the component for colour and height.
Good work!!
from ng2-slim-loading-bar.
ok can you create a new issue ?
in the meantime you can use your own css based on https://github.com/aitboudad/ng-loading-bar/blob/master/loading-bar.css
from ng2-slim-loading-bar.
Another option is to simply centralize your http calls into a single data service. I've done something like this;
private getRequest(url: string, data?: any): Observable<any> {
let options = this.createOptions();
let params = new URLSearchParams();
if (data) {
for (let key in data) {
params.set(key, data[key]);
}
options.search = params;
}
this.loadingBar.color = 'blue';
this.loadingBar.start();
return this.http.get(url, options)
.map((r: Response) => {
this.loadingBar.color = 'green';
this.loadingBar.complete();
return r.json() || {};
})
.catch(this.handleError);
}
private postRequest(url: string, data: any) {
this.loadingBar.color = 'blue';
this.loadingBar.start();
return this.http.post(url, JSON.stringify(data), this.createOptions())
.map((response: any) => {
this.loadingBar.color = 'green';
this.loadingBar.complete();
if (response._body && response._body.length > 0) {
return response.json() || {};
}
return {}; // empty response
})
.catch(this.handleError);
}
In my central error handler, I complete the loading bar as well, but change the color to red first.
from ng2-slim-loading-bar.
@finleysg Problem with your implementation is, currently loading bar completes automatically if the request take a long time, lets say 2 mins.
The browser might have internal timeout, but that's browser dependent. We as developers should not be dependent on the browser settings. We should have control over this instead
Try this in the demo
from ng2-slim-loading-bar.
@thekalinga you're exactly right, but I'm willing to live with that for now. It's on my punch list to fix that, but not a priority.
from ng2-slim-loading-bar.
Also when multiple simultaneous requests are made, the bar gets confused about start and finish. Interesting would be to check if the bar is already running / has open requests.
from ng2-slim-loading-bar.
Also the new HttpClient: @angular/common/http
might provide some better options like interceptors to realize this. https://angular.io/guide/http#intercepting-all-requests-or-responses
from ng2-slim-loading-bar.
Related Issues (20)
- Update to work in Angular 2.4.7. Error: No provider for EventEmitter! HOT 1
- Question about AoT HOT 2
- Make interval configurable HOT 1
- Angular 4 support HOT 2
- Both ways support
- ExpressionChangedAfterItHasBeenCheckedError: Expression has changed after it was checked. Previous value: '0%'. Current value: '15%'. HOT 4
- Angular 4 - Cannot read property 'Injectable' of undefined HOT 2
- Make animation smoother / customize animation HOT 1
- Making REST call twice.
- How to laod this with every Rest call HOT 3
- Calling progress method from jquery event
- When changeDetection is ChangeDetectionStrategy.OnPush component is not working HOT 1
- Call loader from anywhere
- Bar completes before it is asked to complete HOT 1
- Refactor setInterval to Observable.interval
- Angular Universal compile error HOT 1
- Angular 5 support. HOT 12
- Loading bar height
- angular6 support HOT 9
- ..
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from ng2-slim-loading-bar.