Show and hide loading at the beginning and end of the observable subscription

Question

I want to show and hide the loading at the beginning and end of the observable subscription, but not succeeding. I think it's something related to forkJoin or switchMap. Below is what I've tried:

this.query
  .debounceTime(400)
  .distinctUntilChanged()
  .switchMap((query) => {
    // code...
    return Observable.forkJoin(sources);
  })
  .finally(() => console.log('completed')) // never called
  .subscribe((hashtags) => {
    // code...
  }, (error) => {
    console.log(error);
  }, () => {
    console.log('completed'); // never called
  });

Answer 1

A very common problem with forkJoin is that all its source Observables need to emit at least one value and complete before the forkJoin emits anything.

It's hard to say what you're doing inside switchMap() and what this.query is but both the complete signals and the finally() operator are called only when the Observable chain completes. So if you're receiving items in the next callback (that's the (hashtags) => { // code... } function) and you know the completed string is never printed that it seems like the source never completes and thus either finally() nor the complete callbacks are called.