Create loading.interceptor.ts

flare-ui/src/app/interceptors/loading.interceptor.ts

@@ -0,0 +1,27 @@
+import { Injectable } from '@angular/core';
+import { HttpInterceptor, HttpRequest, HttpHandler, HttpEvent } from '@angular/common/http';
+import { Observable } from 'rxjs';
+import { finalize } from 'rxjs/operators';
+import { LoadingService } from '../services/loading.service';
+
+@Injectable()
+export class LoadingInterceptor implements HttpInterceptor {
+  constructor(private loadingService: LoadingService) {}
+
+  intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
+    // Skip loading for certain requests
+    const skipLoading = req.headers.has('X-Skip-Loading');
+    
+    if (!skipLoading) {
+      this.loadingService.show();
+    }
+
+    return next.handle(req).pipe(
+      finalize(() => {
+        if (!skipLoading) {
+          this.loadingService.hide();
+        }
+      })
+    );
+  }
+}