CODEWITHSUNDEEP
angularspinnerloader
SVill
SVill

Reputation: 439

Unable to show spinner in Angular on routing request

I'm trying to set up a spinner to show for requests in angular 5. So far, I've been using the tutorial found here:

https://www.amadousall.com/angular-routing-how-to-display-a-loading-indicator-when-navigating-between-routes/

It seems very straight forward; set a boolean to evaluate to either true or false depending on the event. The only change I really needed to make for my code was to ngx-spinner in the html instead of mat-progress-bar. However, so far I've been unable to make the spinner show up.

Here is the code for reference, though it is pretty much identical to the link's:

import {Component} from '@angular/core';
import { NgxSpinnerService } from 'ngx-spinner';
import {Event, NavigationCancel, NavigationEnd, NavigationError, NavigationStart, Router} from '@angular/router';

@Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.scss']
})
export class AppComponent {
    loading = false;

    constructor(private router: Router, private spinner: NgxSpinnerService) {
        this.router.events.subscribe((event: Event) => {
            console.log('Event Occured');
            switch (true) {
                case event instanceof NavigationStart: {
                    this.loading = true;
                    console.log(this.loading);
                    break;
                }
                case event instanceof NavigationEnd:
                case event instanceof NavigationError:
                case event instanceof NavigationCancel: {
                    this.loading = false;
                    console.log(this.loading);
                    break;
                }
                default: {
                    break;
                }
            }
        });
    }

    /*ngOnInit() {
        /!** spinner starts on init *!/
        this.spinner.show();

        setTimeout(() => {
            /!** spinner ends after 5 seconds *!/
            this.spinner.hide();
        }, 5000);
    }
*/

}

And here is the app.component.html:

<ngx-spinner [hidden]="loading==false"
             bdColor = "rgba(51, 51, 51, 0.8)"
             size = "default"
             color = "#ffee00"
             type = "pacman"
>
<app-nav></app-nav>
<router-outlet [hidden]="loading==true">
</router-outlet>

What I would like is for the spinner to show while loading is true, and for the router-outlet, and the content it provides, to be hidden. Once loading is false, the spinner will be hidden and the content will be shown.

So far, I've only been able to get the spinner to show when I comment out all the cases except for NavigationStart, preventing loading from ever changing to false. In addition, I was able to see the content returned by router-outlet behind the spinner, despite the hidden tag on it. I was able to get it to hide by placing it in a div:

<div [hidden]="loading==true">
    <app-nav></app-nav>
    <router-outlet>
    </router-outlet>
</div>

But that still doesn't solve the fact that when I allow loading to evaluate to false, I never see the spinner in the first place; it instantly loads the components returned by router-outlet. I'm a beginner at angular, so this is running me up the wall. Is this simply a case of the loading going to fast for me to see the spinner, or is something else at play?

Upvotes: 2

Views: 4670

Answers (2)

christoph
christoph

Reputation: 648

Try to set a timeout here to force the spinner to show

case event instanceof NavigationCancel: {
  console.log(this.loading);
  // force to wait 2 seconds to see the spinner.
  setTimeout(() => {
    this.loading = false;
  }, 2000);
  break;
}

As Karol mentioned, it happens too fast to see the spinner otherwise. Which is okay, you do not wait for something from a remote server. This all happens quite fast locally.

Upvotes: 0

Karol T
Karol T

Reputation: 1126

You can't see the spinner because it hides very fast. Attach some resolver to routing to see spinner in action. Your spinner is probably visible for about 100ms.

Upvotes: 2

Related Questions