5

Is it possible to show spinner instead of an empty page while resolvers do some work?

I have a module with two resolvers: 

 const routes: Routes = [
  {
    path: '',
    component: MyComponent,
    canActivate: [MyAuthGuard],
    resolve: {
      vehicles: FirstResolve,
      drivers: SecondResolve
    },
    children: [
      {
        path: '',
        component: FirstComponent
      },

      {
        path: ':id',
        component: SecondComponent
      }
    ]
  }
];

Each resolver does some time-consuming actions like requests to the server:

@Injectable()
export class FirstResolve implements Resolve<Entity[]>{

  constructor(
    private _firstService: FirstService,
    private _secondService: SecondService,
    private _store: Store<any>
  ) { }

  async resolve(): Promise<Entity[]> {
    let data = await Promise.all([
      this._firstService.getEntities(),
      this._secondService.getEntities()
    ]);

    this._store.dispatch(...);
    this._store.dispatch(...);

    return;
  }

}

Could you help me to figure out?

No_Com
  • 63
  • 1
  • 5
  • 2
    Look here: https://stackoverflow.com/a/38620817/6588498 – Rohit Sharma Aug 29 '18 at 09:16
  • @Rohit Sharma, This is of route change. This will not run loader when accessing data of resolver. – Harun Or Rashid Aug 29 '18 at 09:54
  • @RohitSharma I did the same and also check for other types of events such as RouteConfigLoadStart and RouteConfigLoadEnd. As Harunur Rashid said, it won't help. – No_Com Sep 03 '18 at 07:06
  • @No_Com Resolver fetches the data when the route moves to the target component on which you are using the resolver, so when the routing is started and the resolver fetches the data until the data is not fetched you can show the spinner, means on routing start event as in the post and hide the spinner when routing ends. By the way, can you make a demo on https://stackblitz.com/? – Rohit Sharma Sep 03 '18 at 07:47

0 Answers0