diff --git a/marketplace-ui/src/app/core/interceptors/api.interceptor.ts b/marketplace-ui/src/app/core/interceptors/api.interceptor.ts
index 32c30e31..4a39168a 100644
--- a/marketplace-ui/src/app/core/interceptors/api.interceptor.ts
+++ b/marketplace-ui/src/app/core/interceptors/api.interceptor.ts
@@ -25,12 +25,16 @@ export const LoadingComponent = new HttpContextToken<string>(() => '');
 
 export const apiInterceptor: HttpInterceptorFn = (req, next) => {
   const router = inject(Router);
-
   const loadingService = inject(LoadingService);
 
   if (req.url.includes('i18n')) {
     return next(req);
   }
+
+  if (req.context.get(LoadingComponent)) {
+    loadingService.showLoading(req.context.get(LoadingComponent));
+  }
+
   let requestURL = req.url;
   const apiURL = environment.apiUrl;
   if (!requestURL.includes(apiURL)) {
diff --git a/marketplace-ui/src/app/modules/product/product-detail/product-detail-version-action/product-detail-version-action.component.ts b/marketplace-ui/src/app/modules/product/product-detail/product-detail-version-action/product-detail-version-action.component.ts
index e256b4e2..f9ede793 100644
--- a/marketplace-ui/src/app/modules/product/product-detail/product-detail-version-action/product-detail-version-action.component.ts
+++ b/marketplace-ui/src/app/modules/product/product-detail/product-detail-version-action/product-detail-version-action.component.ts
@@ -178,7 +178,6 @@ export class ProductDetailVersionActionComponent implements AfterViewInit {
   }
 
   getVersionWithArtifact(ignoreRouteVersion = false) {
-    this.loadingService.showLoading(LoadingComponentId.PRODUCT_VERSION);
     this.sanitizeDataBeforeFetching();
     this.productService
       .sendRequestToProductDetailVersionAPI(
@@ -203,7 +202,6 @@ export class ProductDetailVersionActionComponent implements AfterViewInit {
             this.getVersionFromRoute(ignoreRouteVersion) ?? this.versions()[0]
           );
         }
-        this.loadingService.hideLoading(LoadingComponentId.PRODUCT_VERSION);
       });
   }
 
diff --git a/marketplace-ui/src/app/modules/product/product.service.ts b/marketplace-ui/src/app/modules/product/product.service.ts
index aaabb618..9f5a5e43 100644
--- a/marketplace-ui/src/app/modules/product/product.service.ts
+++ b/marketplace-ui/src/app/modules/product/product.service.ts
@@ -18,7 +18,6 @@ export class ProductService {
   loadingService = inject(LoadingService);
 
   findProductsByCriteria(criteria: Criteria): Observable<ProductApiResponse> {
-    this.loadingService.showLoading(LoadingComponentId.LANDING_PAGE);
     let requestParams = new HttpParams();
     let requestURL = API_URI.PRODUCT;
     if (criteria.nextPageHref) {
@@ -82,7 +81,13 @@ export class ProductService {
     const params = new HttpParams()
       .append('designerVersion', designerVersion)
       .append('isShowDevVersion', showDevVersion);
-    return this.httpClient.get<VersionData[]>(url, { params });
+    return this.httpClient.get<VersionData[]>(url, {
+      params,
+      context: new HttpContext().set(
+        LoadingComponent,
+        LoadingComponentId.PRODUCT_VERSION
+      )
+    });
   }
 
   sendRequestToUpdateInstallationCount(
diff --git a/marketplace-ui/src/app/modules/security-monitor/security-monitor.component.ts b/marketplace-ui/src/app/modules/security-monitor/security-monitor.component.ts
index 395c3a43..9a0bce2c 100644
--- a/marketplace-ui/src/app/modules/security-monitor/security-monitor.component.ts
+++ b/marketplace-ui/src/app/modules/security-monitor/security-monitor.component.ts
@@ -7,8 +7,6 @@ import { SecurityMonitorService } from './security-monitor.service';
 import { ProductSecurityInfo } from '../../shared/models/product-security-info-model';
 import { GITHUB_MARKET_ORG_URL, REPO_PAGE_PATHS, SECURITY_MONITOR_MESSAGES, SECURITY_MONITOR_SESSION_KEYS, TIME_UNITS, UNAUTHORIZED } from '../../shared/constants/common.constant';
 import { LoadingComponentId } from '../../shared/enums/loading-component-id';
-import { LoadingService } from '../../core/services/loading/loading.service';
-import { finalize } from 'rxjs';
 import { LoadingSpinnerComponent } from '../../shared/components/loading-spinner/loading-spinner.component';
 
 @Component({
@@ -25,7 +23,6 @@ export class SecurityMonitorComponent {
   errorMessage = '';
   repos: ProductSecurityInfo[] = [];
   protected LoadingComponentId = LoadingComponentId;
-  loadingService = inject(LoadingService);
   private readonly securityMonitorService = inject(SecurityMonitorService);
 
   ngOnInit(): void {
@@ -62,14 +59,8 @@ export class SecurityMonitorComponent {
   }
 
   private fetchSecurityDetails(): void {
-    this.loadingService.showLoading(LoadingComponentId.SECURITY_MONITOR);
     this.securityMonitorService
       .getSecurityDetails(this.token)
-      .pipe(
-        finalize(() =>
-          this.loadingService.hideLoading(LoadingComponentId.SECURITY_MONITOR)
-        )
-      )
       .subscribe({
         next: data => this.handleSuccess(data),
         error: (err: HttpErrorResponse) => this.handleError(err)
diff --git a/marketplace-ui/src/app/modules/security-monitor/security-monitor.service.ts b/marketplace-ui/src/app/modules/security-monitor/security-monitor.service.ts
index b2b15ffb..9f6868df 100644
--- a/marketplace-ui/src/app/modules/security-monitor/security-monitor.service.ts
+++ b/marketplace-ui/src/app/modules/security-monitor/security-monitor.service.ts
@@ -1,19 +1,26 @@
-import { HttpClient, HttpHeaders } from '@angular/common/http';
+import { HttpClient, HttpContext, HttpHeaders } from '@angular/common/http';
 import { inject, Injectable } from '@angular/core';
 import { Observable } from 'rxjs';
 import { environment } from '../../../environments/environment';
 import { ProductSecurityInfo } from '../../shared/models/product-security-info-model';
+import { LoadingComponent } from '../../core/interceptors/api.interceptor';
+import { LoadingComponentId } from '../../shared/enums/loading-component-id';
 
 @Injectable({
   providedIn: 'root'
 })
 export class SecurityMonitorService {
-
   private readonly apiUrl = environment.apiUrl + '/api/security-monitor';
   private readonly http = inject(HttpClient);
 
   getSecurityDetails(token: string): Observable<ProductSecurityInfo[]> {
     const headers = new HttpHeaders().set('Authorization', `Bearer ${token}`);
-    return this.http.get<ProductSecurityInfo[]>(this.apiUrl, { headers });
+    return this.http.get<ProductSecurityInfo[]>(this.apiUrl, {
+      headers,
+      context: new HttpContext().set(
+        LoadingComponent,
+        LoadingComponentId.SECURITY_MONITOR
+      )
+    });
   }
 }