I have a nice animation between my routes and I added a warp to every component to show the component only after the data has been loaded, it's look like this:

my component HTML file:

<div *ngIf="isDataAvailable">
   ...my component html template...
</div>

and this is my ts file:

isDataAvailable:boolean = false;
ngOnInit() {
    this.subscription = this.clientsService.getClients().subscribe(
      (result:any) => {
        this.data = result.clients;
        this.isDataAvailable = true;
      }
    );
}

in my root ts file I have this animation settings:

import { customTransition } from './custom-transition.animation';

@Component({
  selector: 'app-master',
  templateUrl: './master.component.html',
  styleUrls: [
    './master.component.css',
  ],
  animations: [customTransition()],
  encapsulation: ViewEncapsulation.None
})

and this is my HTML template for the root file

<ng2-page-transition [animation]="customAnimation">
    <div [@ng2ElementState]="customAnimation.state">
        <router-outlet></router-outlet>
    </div>
</ng2-page-transition>

my issue right now is that some components are loading fast and some are loading slowly because of the data they have and this is fine but those that are loading slowly the user don't see the animation but just the component is shown when it is ready.

I would like to start the animation after the data is beeing load maybe even to show some preloader for the user before the component is ready.

thank you!

EDIT:

this is my customTransition.animation.ts file:

//custom-transition.animation.ts
import {trigger, state, animate, style, transition, AnimationEntryMetadata} from '@angular/core';

export function customTransition():AnimationEntryMetadata {
  return slideOutAndIn();
}

function slideOutAndIn():AnimationEntryMetadata {
  return trigger('ng2ElementState', [
    state('leave', style({
        position:'inherit', 
        display:'block',
        width:'100%'
    })),
    state('enter', style({
        position:'inherit', 
        display:'block',
        width:'100%'
    })),
    transition('* => enter', [
        style({
            transform: 'translateY(10%)',
            opacity: 0
        }),
        animate('0.5s ease-in-out', style({
            transform: 'translateY(0%)',
            opacity: 1
        }))
    ]),
    transition('* => leave', [
      style({
        transform: 'translateY(0%)',
        opacity: 0
      }),
      animate('0.5s ease-in-out', style({
        transform: 'translateY(-10%)',
        opacity: 0
      }))
    ]),
  ]);
}