Here is what I did in our project (Red Hat Automated Migration Toolkit):
- In our HTTP service wrapper (handling OAuth), we fire an event,
- which is then caught by our
LoadingIndicatorService.
LoadingIndicatorService
- wraps the
SlimLoaderBarService,
- and keeps track of how many HTTP requests there are in progress.
- Then it counts the percent and puts it to a scale of 20 to 90 %.
- When all HTTP requests are done, it stays at 90 % for about a second, and then
complete() is called.
If you have multiple requests for each navigation step, this looks quite naturally and provides a good UX.
If you typically only have 1 request, then you might want to either adjust the CSS based animation (make it longer) or use start() afterall.
Here are some key code parts:
@Injectable()
export class LoadingIndicatorService {
constructor(
private _slimBarService: SlimLoadingBarService,
private _eventBusService: EventBusService,
) {
// Register the LoadingSomething event listeners.
this._eventBusService.onEvent
.filter(event => event.isTypeOf(LoadingSomethingStartedEvent))
.subscribe((event: LoadingSomethingStartedEvent) => this.loadingStarted() )
this._eventBusService.onEvent
.filter(event => event.isTypeOf(LoadingSomethingFinishedEvent))
.subscribe((event: LoadingSomethingFinishedEvent) => this.loadingFinished() )
}
public getSlimService(){
return this._slimBarService;
}
private counter: number = 0;
private max: number = void 0;
private reset() {
this.counter = 0;
this.max = void 0;
}
public loadingStarted(){
this.counter++;
this.max = this.counter;
this.updateProgress();
}
public loadingFinished(){
this.counter--;
this.updateProgress();
}
private updateProgress() {
if (this.counter == 0) {
this._slimBarService.height = "2px";
this._slimBarService.visible = true;
this._slimBarService.progress = 95;
this.max = void 0;
Observable.timer(700).subscribe(() => {
this._slimBarService.complete();
});
}
else {
// max - counter = finished.
// If the things to load are added after something loaded, the progress would go back.
// But let's rely on that loading will start fast at the beginning.
// Start at 20, jump to 90.
let percent = 20 + 70 * (1 - (this.max - this.counter) / this.max);
this._slimBarService.height = "3px";
this._slimBarService.color = "#39a5dc";
this._slimBarService.visible = true;
this._slimBarService.progress = percent;
}
}
}
let responseObservable2 = responseObservable.do(
() => console.log("Request SUCCEEDED"),
() => console.log("Request FAILED"),
() => {
console.log("Request FINISHED");
if (this._eventBus) {
console.log("Request FINISHED, firing");
this._eventBus.fireEvent(new LoadingSomethingFinishedEvent(responseObservable))
}
}
);
HTTP service wrapper:
@Injectable()
export class WindupHttpService extends Http {
private configureRequest(method: RequestMethod, f: Function, url: string | Request, options: RequestOptionsArgs = {}, body?: any): Observable<Response> {
let responseObservable: Observable<Response> = ...
...
console.log("Load STARTED");
if (this._eventBus)
console.log("Load STARTED, firing");
this._eventBus.fireEvent(new LoadingSomethingStartedEvent(responseObservable));
return responseObservable2;
}
For the complete code, search github.com for project Windup.
