CODEWITHSUNDEEP
angularangular2-routing
yamidvo
yamidvo

Reputation: 661

Angular 2 resolver with loading indicator

I use resolvers to load the data into the components, but until the data is not returned from the server the component does not load. I would like to know if there is a way to render a load indicator before the server responds.

Upvotes: 37

Views: 15445

Answers (4)

yaircarreno
yaircarreno

Reputation: 4257

You can use the "reacting to routing events" strategy that consist to implement the App to react when any routing event occurs. To do that, you will need in your app.component.ts some code like:

import { Component } from '@angular/core';
import { Router, RouterEvent, NavigationStart, NavigationEnd, NavigationError, NavigationCancel } from '@angular/router';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.sass']
})
export class AppComponent {

  loading: boolean = true;

  constructor(private router: Router) {
    router.events.subscribe((routerEvent: RouterEvent) => {
      this.checkRouterEvent(routerEvent);
    });
  }

  checkRouterEvent(routerEvent: RouterEvent): void {
    if (routerEvent instanceof NavigationStart) {
      this.loading = true;
    }

    if (routerEvent instanceof NavigationEnd ||
      routerEvent instanceof NavigationCancel ||
      routerEvent instanceof NavigationError) {
      this.loading = false;
    }
  }
}

And in the view(html) something like:

<div id="loader" class="myloader" *ngIf="loading">
  Loading...
</div>

Upvotes: 64

phikes
phikes

Reputation: 620

Another solution I came up with is using Observable<Observable<...>> in your resolvers:

// data-resolver.service.ts

// ...

export class DataResolverService implements Resolve<Observable<Data>> {

// ...

  resolve(route: ActivatedRouteSnapshot): Observable<Observable<Data>> {
    return of(this.client.get(...));
  }
}

Notice the usage of rxjs's of operator to construct an immediately completing Observable from your source Observable. Now you can easily handle your loading indicator in the component:

export class DashboardComponent {
  loading = true;
  error = false;

  data$: Observable<Data>;

  constructor(private activatedRoute: ActivatedRoute) {
    this.data$ = this.activatedRoute.data.pipe(switchMap((data) => data.data$));
    this.data$.subscribe(() => this.loading = false, () => this.error = true);
  }
}

See my in-depth medium story about this here. This is a real life example coming from my shift scheduling application tift.

Upvotes: -4

Shashank Singh
Shashank Singh

Reputation: 553

You should use https://www.npmjs.com/package/angular2-busy

which Directly listen to your Api call

ngOnInit() {
        this.busy = this.http.get('...').subscribe();
    }

<div [ngBusy]="busy"></div>

This will show spinner until you get response from server.

Upvotes: -6

TheRealMrCrowley
TheRealMrCrowley

Reputation: 976

the simplest version is going to be an ngIf statement

wrap an image in an ngIf on a root level component.

use a service to set whether it is visible or not.

eg:

before sending request: call service function to set variable to true

then in the component that is loaded, have the first thing that it does is set that variable back to false

Upvotes: -2

Related Questions