Angular 7 - Set time interval between navigation of routes

Question

I want to see a loader while navigating from one page to another. For this, I purposely want to set timeout or time interval between the navigation of two routes. The name of routes is "list" and "register". How do I add a time interval between the navigation of two routes?

Dashboard Component :

import { Component, OnInit } from '@angular/core';
import { Router, Event, NavigationStart, NavigationEnd } from '@angular/router';

@Component({
  selector: 'app-dashboard',
  templateUrl: './dashboard.component.html',
  styleUrls: ['./dashboard.component.css']
})
export class DashboardComponent implements OnInit {
  showloader = true;

  constructor(private route: Router) {
    this.route.events.subscribe((routerEvent: Event) => {

      if(routerEvent instanceof NavigationStart){  
        this.showloader = true;
      }

      if(routerEvent instanceof NavigationEnd){
        this.showloader = false;
      }
    });
  }

  ngOnInit() {
  }
}

DashBoard.html:

<div>
    <nav class="navbar navbar-expand-sm bg-light">
        <ul class="nav navbar-nav">
            <li class="nav-item">
                <a class="nav-link" routerLink="list">List of Animes</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" routerLink="register">Register</a>
            </li>
            <li class="nav-item">
                <a class="nav-link">Description</a>
            </li>
        </ul>
    </nav>
</div>

Answer 1

routerOnActivate() { //or ngOnInit()
  this.timer = setInterval(()=>{
                ...
            }, 100);
}

routerOnDeactivate() {
  clearInterval(this.timer);
}