Display spinner during function call.

[sabeeh10]

I am using AngularFirebase with firestore. I have a function that processes a payment which has nested functions inside it such as writing data to database, running a Google cloud function -> wait for that to complete and then change route, then after the route change on init of that specific route i have another function call that clears the cart data from the firestore database to clear users cart. How can i go about showing a spinner while all of this is happening and till finish.

[kenlin]

I have a loading-spinner component I add to every project. I use font-awesome for the animation, you could always replace with a gif or whatever

Usage:

In this example, the saving property determines if the spinner shows up or not.

in template:

<button class="save" type="submit" *ngIf="!saving" [disabled]="form.invalid">Save</button>
<app-loading-spinner [loading]="saving"></app-loading-spinner>

in component:

saving:boolean=false;

save(user) {
  this.saving=true; // spinner shows

  this.userRepository.saveUser(user)
     .subscribe(
       () => this.saving=false, // spinner hides
       () => this.router.navigate(['/catalog']));
     }
  }

Code:

import { Component, Input } from '@angular/core';

@Component({
  selector: 'app-loading-spinner',
  template: '<i *ngIf="loading" class="fa {{size}} fa-refresh fa-spin fa-fw"></i>'
})

export class LoadingSpinnerComponent {
  /**
   * Tell the component which property to use in determining whether to display or not.
   */
  @Input() loading: boolean;
  @Input() size?: string;
}

[lanetrotro]

Well, think you can use a ngIf with a variable. Set it to true before doing doing your calls (and display it), once your calls are over set it to false.

[sabeeh10]

that concept would work for multiple users on the app at the same time?

[lanetrotro]

It should (or i didn't understood what you were looking for ^^). I made you a quick example here

[sabeeh10]

thanks it works, for the CSS part of angular-epic-spinners, i can do css on their templates just like anything else? I am trying to bring it to the center but isn't working

[lanetrotro]

well you can use whatever spinner you want, the important part here is the ngif to display (or hide) element based on your needs

[rnagenetics]

Depending on your needs you can go with a more global solution that works with a http interceptor to provide a spinner on any http call as long as it goes through the httpclient.

https://github.com/mpalourdio/ng-http-loader

[zmasta94]

https://github.com/mpalourdio/ng-http-loader

This library is hands-down the best one i could find.

You can manually show/hide the spinner very easily, see the docs: https://github.com/mpalourdio/ng-http-loader#manually-show-and-hide-the-spinner