flare-ui/src/app/services/loading.service.ts

import { Injectable } from '@angular/core';
import { BehaviorSubject } from 'rxjs';

@Injectable({
  providedIn: 'root'
})
export class LoadingService {
  private loadingSubject = new BehaviorSubject<boolean>(false);
  public loading$ = this.loadingSubject.asObservable();
  
  private activeRequests = 0;

  show() {
    this.activeRequests++;
    this.loadingSubject.next(true);
  }

  hide() {
    this.activeRequests--;
    if (this.activeRequests <= 0) {
      this.activeRequests = 0;
      // Small delay to prevent flicker
      setTimeout(() => {
        if (this.activeRequests === 0) {
          this.loadingSubject.next(false);
        }
      }, 300);
    }
  }

  forceHide() {
    this.activeRequests = 0;
    this.loadingSubject.next(false);
  }
}