CODEWITHSUNDEEP
angular
RAHUL KUNDU
RAHUL KUNDU

Reputation: 955

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;
        }
      }
    });
  }

Upvotes: 2

Views: 2430

Answers (1)

Rishanthakumar
Rishanthakumar

Reputation: 899

Just put the same loading gif in index.html like the following.

<body>
  <app-root>
    <div class="loader">
       <img src="./assets/images/loader.gif" alt="" />
    </div>
  </app-root>
</body>

This happens because when you do a browser refresh app initializes again and it will take some time. By putting the loading gif as shown above will make sure that until app loads a proper loading is shown.

Upvotes: 2

Related Questions