How to display waiter while resolving data in Angular 2.0.0?

I've project based on Angular 2.0.0, and I want to display waiter (gif or text) while navigating routes, which must resolve data like this:

   { 
      path: 'profile',
      loadChildren: () => System.import('../profile/profile.module'),
      resolve: {
        profile: ProfileResolver
      },
    },

Also, preloader need to be applied to every route in project. Thanks.


ANSWERS:


I'd say you can create a service which would keep eye on routing events and based on NavigationStart & NavigationEnd event it will show/hide loading based on isLoading flag value with combination of [hidden].

Code

isLoading: bool = false;
constructor(router:Router) {
  router.events.subscribe(event:Event => {
    if(event instanceof NavigationStart) {
       this.isLoading = true;
    }
    if(event instanceof NavigationCancel || event instanceof NavigationError) {
       this.isLoading = false;
    }
  }
}


 MORE:


 ? Populating a child router-outlet Angular2
 ? Providing input/subcommands to command executed over SSH with JSch Using JSF
 ? Providing input/subcommands to command executed over SSH with JSch
 ? How do I programaticly navigate to a route from an event handler in React Router 4.0?
 ? Get react router path in props with redux ownProps
 ? Using goBack function from react-router-redux
 ? Router outlet without tag?
 ? Angular2 router and localhost/webapp
 ? Access server in local network through domain
 ? routing data to my param page in react.js