I have recently developed a spinner component
import { Router, NavigationStart, NavigationEnd, NavigationCancel, NavigationError } from '@angular/router';
import { Component, OnInit, OnDestroy, ViewEncapsulation } from '@angular/core';
@Component({
selector: 'app-spinner',
templateUrl: './spinner.component.html',
styleUrls: ['./spinner.component.scss'],
encapsulation: ViewEncapsulation.None
})
export class SpinnerComponent implements OnDestroy {
public isSpinnerVisible = true;
constructor(private router: Router) {
this.router.events.subscribe(event => {
if (event instanceof NavigationStart) {
this.isSpinnerVisible = true;
} else if ( event instanceof NavigationEnd || event instanceof NavigationCancel || event instanceof NavigationError) {
this.isSpinnerVisible = false;
}
}, () => {
this.isSpinnerVisible = false;
});
}
ngOnDestroy(): void {
this.isSpinnerVisible = false;
}
}
In the app.component.html file:
<router-outlet>
<app-spinner></app-spinner>
</router-outlet>
In the spinner.component.html file:
<div class="preloader" *ngIf="isSpinnerVisible">
<div class="spinner">
<div class="double-bounce1"></div>
<div class="double-bounce2"></div>
</div>
</div>
However, I am facing an issue where the spinner is not showing, and even though some background ajax requests are still in progress, NavigationEnd event quickly triggers.