Angular 4+. Show spinner while resolvers is process

Viewed 3369

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?

0 Answers
Related