How to show a loading indicator in Angular Route Resolver

I have created a Route resolver in my angular project. I have also implemented a loading gif in my app component. When I am navigation from one route to another the loading is working fine. But if i reloads the page or press f5 then the page becomes blank(white) for a certain time. After resolver fetches the data the the page again showing.

Question- How can show the same loader while i refresh the page?

App Component HTML

<div *ngIf="isLoading == true">
    <div class="loader">
       <img src="./assets/images/loader.gif" alt="" />
    </div>
</div>

<!-- while route is completed ajax calls -->
<div *ngIf="isLoading == false">
    <router-outlet></router-outlet>
</div>

App Component ts

public isLoading = false;

constructor(private router: Router) {
    this.router.events.subscribe((event: RouterEvent) => {
      switch (true) {
        case event instanceof NavigationStart: {
          this.isLoading = true;
          break;
        }

        case event instanceof NavigationEnd:
        case event instanceof NavigationCancel:
        case event instanceof NavigationError: {
          this.isLoading = false;
          break;
        }
        default: {
          break;
        }
      }
    });
  }