@tinkoff/navigation-skeleton

Navigation skeleton is a component for showing skeletons during navigation process

Usage no npm install needed!

<script type="module">
  import tinkoffNavigationSkeleton from 'https://cdn.skypack.dev/@tinkoff/navigation-skeleton';
</script>

README

Tinkoff Navigation Skeleton

Build npm version angular-open-source-starter

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