Create loading.service.ts

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

@@ -0,0 +1,35 @@
+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);
+  }
+}