Angular Spinner Hide Function Doesn't Work

Question

In my app, I have a spinner which stops after GET functions are done. For one screen, the spinner doesn't hide even though GET functions looks done in the network. The counter never becomes 0. What could be the problem?

Spinner Service:

private _spinner: FuseSpinnerComponent;
    private _callCount: number = 0;
    public hide(): void {
    
            this._callCount--;
            if (this._spinner && this._callCount <= 0) {
                this._spinner.Hide();
            }
        }

HTTP Service:

get(url: string, contentType?: ContentTypes): Observable<any> {

    this._spinner.show();

    return this._http.get(this.baseUri + url, { headers: this.getHeader(contentType) }).pipe(
        catchError((err: any) => this.handleError(err)),
        finalize(() => {
            this._spinner.hide();
        }),);
}

The Screen:

if (state.url.indexOf("/admin/contact-list") >= 0) {
            return new Promise((resolve, reject) => {
                Promise.all([
                    this.getContactList(),
                    this.getGeoTypeList(),
                    this.getSectorTypeList(),
                ]).then(
                    ([results]) => {
                        resolve([]);
                    },
                    reject
                );
            });
        }

    getContactList() {
        return new Promise((resolve, reject) => {
            this._http
                .get("Crm/GetContactList/")
                .subscribe((response: IContact[]) => {
                    this.contactList = response;
                    this.onContactListChanged.next(
                        this.contactList
                    );
                    resolve(this.contactList);
                }, reject);
        });
    }
        getGeoTypeList(): Observable<IGeoType[]> {
        return this._http.get("Parameter/GetGeoTypeList");
    }

    getSectorTypeList(): Observable<IGeoType[]> {
        return this._http.get("Parameter/GetSectorTypeList");
    }

Answer 1

The Http client requests are cold, you have to subscribe to them to get the data.

get(url: string, contentType?: ContentTypes): Observable<any> {

this._spinner.show();

return this._http.get(this.baseUri + url, { headers: 
  this.getHeader(contentType) }).pipe(
    catchError((err: any) => this.handleError(err)),
   }).subscribe( _ => this._spinner.hide())
    );
}