CODEWITHSUNDEEP
angularangular2-routing
kolrie
kolrie

Reputation: 12732

Progress loader for ng2 route resolver

I am using route resolvers, like:

  routes.push({
    path: '', component: MainComponent, children: [
      {path: 'config', component: ConfigurationWizardComponent, resolve: { settings: SettingsResolver }},
      {path: 'jobs', children: [
        {path: '', component: JobsOverviewComponent, resolve: { settings: NoFallbackSettingsResolver }},
        {path: 'add', component: JobFormComponent, resolve: { databases: DatabaseResolver }},
      ]},
      {path: '', redirectTo: '/jobs', pathMatch: 'full'},
    ],
  });

However, since the resolvers take a little while to complete, it seems that the application is not doing anything until the resolver finishes.

Is it possible to provide any kind of visual feedback to the user while a route resolver is being executed?

Upvotes: 1

Views: 439

Answers (1)

raberana
raberana

Reputation: 11816

I have this issue too. If you plan to have a simple loader that does not indicate any progress (eg. a simple spinner loader), what you can do is subscribe to a router's events and show and hide the loader.

constructor(private router: Router) {
 router.events
 .filter(event => event instanceof NavigationStart)
 .subscribe(() => { // show the progress bar });

  router.events
 .filter(event => event instanceof NavigationEnd)
 .subscribe(() => { // complete the progress bar })
}

However, if you plan to show any progress during the loading (like Youtube's progress bar at the top), that I still don't know how to implement.

Upvotes: 1

Related Questions