Search code examples
javascriptrxjsrxjs-observables

What's the difference between RxJS complete vs add and what's better for a loading spinner?

I have this code below where I have both complete and add and I've been using add as the way to stop a loading spinner when I make a call to my controller, as it seems the correct way to stop it if there is some problem with the call that fetches from the controller, because Add() is always called.

But I'd like to know what complete is for and if I should use it instead of add to stop my spinner from spinning on the client side? What's the difference between add and complete?

this.loadingSpinner = true;

this.membersService.getMemberProfile().subscribe({
  next: (v) => {
    // load profile into form
  },
  error: (e) => {
    console.error(e);
  },
  complete: () => {
    this.loadingSpinner = false;
  }
}).add(() => {
  this.loadingSpinner = false;
});

Solution

  • Observable.subscribe returns a Subscription object, and Subscription.add is a method where you tell the subscription to do something when unsubscribed.

    Observer.complete is called when the observable it's listening to successfully completes.

    So for your code, .add() works better because it will be called whether there's an error or successful completion.