What is the difference between RxJS Complete vs Add, which one is better for loading spinners?

Question

I have this code below, I have done and added at the same time, and I have been using add as the method to stop loading the spinner when I call the controller, as that seems to be the correct way to stop loading the spinner (if There is some problem with the call getting from the controller because Add() is always called.

But I want to know what is the purpose of complete and should I use it instead of add to prevent my spinner from rotating client side? What is 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;
});

Answer 1

Observable.subscribe returns a Subscription object, and Subscription.add is a way to tell a subscription to perform certain actions when unsubscribed.

Observer.complete Called to listen for successful completion when the observable is called.

So for your code, .add() works better because it will be called whether there is an error or it completes successfully.