Question: Usage with @angular/http

[michael34]

Hi,

thank you for this component. How would I use it with @angular/http?
In angular 1 I use this: https://chieffancypants.github.io/angular-loading-bar/

[akserg]

I plan to make small changes to support it out of the box.

[niyazhussain]

@akserg can you provide hint on how to make this working , i will fork and do . :)

[JohannesRudolph]

@akserg any news on this? let me know if we can contribute any help on this.

[michael34]

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;
};

}
`

[shammelburg]

This will be a good implementation

[ASHFAQPATWARI]

@akserg Any milestone for this? Would be a great plugin if it can work like: automatic loading bar

[akarabach]

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.

[akarabach]

Anyone have any ideas how to do it? I can do it, but i don't know where to start :(

[aitboudad]

I already implemented, you just need to override the Http service, I'll publish it next week!

[akarabach]

Where you publish ?

[aitboudad]

see https://github.com/aitboudad/ng-loading-bar

[shammelburg]

@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!!

[aitboudad]

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

[finleysg]

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.

[thekalinga]

@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

[finleysg]

@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.

[daniel-seitz]

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.

[daniel-seitz]

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