Tinkoff Navigation Skeleton

This component allows you to show skeletons of pages during navigation process.

Install

$ npm install @tinkoff/navigation-skeleton

How to use

1. Add NavigationSkeletonModule, to the imports section of root module.

   @NgModule({
      ...
      imports: [
          ...
          RouterModule.forRoot(...),
          NavigationSkeletonModule,
      ],
   })
   export class AppModule {}
   

2. Change <router-outlet></router-outlet> to

   <tcs-navigation-skeleton>
       <router-outlet></router-outlet>
   </tcs-navigation-skeleton>
   

3. Add skeleton component to the route definition

   const route: NavigationSkeletonRoute = {
      path: '...',
      component: ...,
      skeleton: {
          component: MySkeletonComponent,
      },
   };
   

Demo

https://stackblitz.com/edit/tcs-navigation-skeleton