import { Inject , Injectable } from '@angular/core' ; import { DOCUMENT } from '@angular/common' ; import { AnimationBuilder , animate , AnimationPlayer , style } from '@angular/animations' ; import { NavigationEnd , Router } from '@angular/router' ; import { filter } from 'rxjs/operators' ; @ Injectable ( { providedIn : 'root' } ) export class NotaddLoadingService { loadingEl : any ; player : AnimationPlayer ; constructor ( private animationBuilder , @ Inject ( DOCUMENT ) private document , private router ) { this . init ( ) ; } private init ( ) { this . loadingEl = this . document . body . querySelector ( '#notadd-loading' ) ; if ( this . loadingEl ) { const hideOnLoad = this . router . events . pipe ( filter ( event => event instanceof NavigationEnd ) ) . subscribe ( ( event ) => { window . setTimeout ( ( ) => { this . hide ( ) ; hideOnLoad . unsubscribe ( ) ; } , 0 ) ; } ) ; } } private playAnimation ( type ) { const metadata = { show : [ style ( { opacity : '0' , zIndex : '99999' } ) , animate ( '400ms ease' , style ( { opacity : '1' } ) ) ] , hide : [ style ( { opacity : '1' } ) , animate ( '400ms ease' , style ( { opacity : '0' , zIndex : '-10' } ) ) ] } ; this . player = this . animationBuilder . build ( metadata [ type ] ) . create ( this . loadingEl ) ; window . setTimeout ( ( ) => { this . player . play ( ) ; } , 500 ) ; } show ( ) { this . playAnimation ( 'show' ) ; } hide ( ) { this . playAnimation ( 'hide' ) ; } }