diff --git a/marketplace-ui/src/app/core/interceptors/api.interceptor.ts b/marketplace-ui/src/app/core/interceptors/api.interceptor.ts
index 60c64106..44cc28a4 100644
--- a/marketplace-ui/src/app/core/interceptors/api.interceptor.ts
+++ b/marketplace-ui/src/app/core/interceptors/api.interceptor.ts
@@ -29,7 +29,7 @@ export const ForwardingError = new HttpContextToken<boolean>(() => false);
 /** LoadingComponentId: This option for show loading for component which match with id
  * @Example return httpClient.get('apiEndPoint', { context: new HttpContext().set(LoadingComponentId, "detail-page") })
  */
-export const LoadingComponentId = new HttpContextToken<string>(() => '');
+export const LoadingComponent = new HttpContextToken<string>(() => '');
 
 export const apiInterceptor: HttpInterceptorFn = (req, next) => {
   const router = inject(Router);
@@ -51,7 +51,7 @@ export const apiInterceptor: HttpInterceptorFn = (req, next) => {
   });
 
   if (!req.context.get(SkipLoading)) {
-    loadingService.showLoading(req.context.get(LoadingComponentId));
+    loadingService.showLoading(req.context.get(LoadingComponent));
   }
 
   if (req.context.get(ForwardingError)) {
@@ -69,7 +69,7 @@ export const apiInterceptor: HttpInterceptorFn = (req, next) => {
     }),
     finalize(() => {
       if (!req.context.get(SkipLoading)) {
-        loadingService.hideLoading(req.context.get(LoadingComponentId));
+        loadingService.hideLoading(req.context.get(LoadingComponent));
       }
     })
   );
diff --git a/marketplace-ui/src/app/core/services/loading/loading.service.ts b/marketplace-ui/src/app/core/services/loading/loading.service.ts
index d1589640..4d582982 100644
--- a/marketplace-ui/src/app/core/services/loading/loading.service.ts
+++ b/marketplace-ui/src/app/core/services/loading/loading.service.ts
@@ -1,4 +1,4 @@
-import { computed, Injectable, signal } from '@angular/core';
+import { Injectable, signal } from '@angular/core';
 
 @Injectable({
   providedIn: 'root'
@@ -21,8 +21,4 @@ export class LoadingService {
   hideLoading(componentId: string) {
     this.setLoading(componentId, false);
   }
-
-  isLoading(componentId: string) {
-    return computed(() => this.loadingStates()[componentId]);
-  }
 }
diff --git a/marketplace-ui/src/app/modules/product/product.service.ts b/marketplace-ui/src/app/modules/product/product.service.ts
index 3980d0f5..9a88fc1f 100644
--- a/marketplace-ui/src/app/modules/product/product.service.ts
+++ b/marketplace-ui/src/app/modules/product/product.service.ts
@@ -1,13 +1,16 @@
 import { HttpClient, HttpContext, HttpParams } from '@angular/common/http';
 import { Injectable, inject } from '@angular/core';
-import { delay, finalize, Observable } from 'rxjs';
+import { delay, Observable } from 'rxjs';
 import { LoadingService } from '../../core/services/loading/loading.service';
 import { RequestParam } from '../../shared/enums/request-param';
 import { ProductApiResponse } from '../../shared/models/apis/product-response.model';
 import { Criteria } from '../../shared/models/criteria.model';
 import { ProductDetail } from '../../shared/models/product-detail.model';
 import { VersionData } from '../../shared/models/vesion-artifact.model';
-import { SkipLoading } from '../../core/interceptors/api.interceptor';
+import {
+  SkipLoading,
+  LoadingComponent
+} from '../../core/interceptors/api.interceptor';
 import { VersionAndUrl } from '../../shared/models/version-and-url';
 import { API_URI } from '../../shared/constants/api.constant';
 import { LoadingComponentId } from '../../shared/enums/loading-component-id';
@@ -37,10 +40,12 @@ export class ProductService {
         );
     }
     return this.httpClient.get<ProductApiResponse>(requestURL, {
-      params: requestParams
-    }).pipe(finalize(()=> {
-      this.loadingService.hideLoading(LoadingComponentId.LANDING_PAGE);
-    }));
+      params: requestParams,
+      context: new HttpContext().set(
+        LoadingComponent,
+        LoadingComponentId.LANDING_PAGE
+      )
+    });
   }
 
   getProductDetailsWithVersion(
@@ -48,7 +53,13 @@ export class ProductService {
     version: string
   ): Observable<ProductDetail> {
     return this.httpClient.get<ProductDetail>(
-      `${API_URI.PRODUCT_DETAILS}/${productId}/${version}`
+      `${API_URI.PRODUCT_DETAILS}/${productId}/${version}`,
+      {
+        context: new HttpContext().set(
+          LoadingComponent,
+          LoadingComponentId.PRODUCT_DETAIL_INFORMATION
+        )
+      }
     );
   }
 
@@ -57,7 +68,13 @@ export class ProductService {
     version: string
   ): Observable<ProductDetail> {
     return this.httpClient.get<ProductDetail>(
-      `${API_URI.PRODUCT_DETAILS}/${productId}/${version}/bestmatch`
+      `${API_URI.PRODUCT_DETAILS}/${productId}/${version}/bestmatch`,
+      {
+        context: new HttpContext().set(
+          LoadingComponent,
+          LoadingComponentId.DETAIL_PAGE
+        )
+      }
     );
   }
 
@@ -66,9 +83,17 @@ export class ProductService {
     isShowDevVersion: boolean
   ): Observable<ProductDetail> {
     this.loadingService.showLoading(LoadingComponentId.DETAIL_PAGE);
-    return this.httpClient.get<ProductDetail>(
-      `${API_URI.PRODUCT_DETAILS}/${productId}?isShowDevVersion=${isShowDevVersion}`
-    ).pipe(delay(5000));
+    return this.httpClient
+      .get<ProductDetail>(
+        `${API_URI.PRODUCT_DETAILS}/${productId}?isShowDevVersion=${isShowDevVersion}`,
+        {
+          context: new HttpContext().set(
+            LoadingComponent,
+            LoadingComponentId.PRODUCT_DETAIL_INFORMATION
+          )
+        }
+      )
+      .pipe(delay(5000));
   }
 
   sendRequestToProductDetailVersionAPI(
@@ -82,11 +107,16 @@ export class ProductService {
       .append('isShowDevVersion', showDevVersion);
     return this.httpClient.get<VersionData[]>(url, {
       params,
-      context: new HttpContext().set(SkipLoading, true)
+      context: new HttpContext()
+        .set(SkipLoading, true)
+        .set(LoadingComponent, LoadingComponentId.PRODUCT_DETAIL_INFORMATION)
     });
   }
 
-  sendRequestToUpdateInstallationCount(productId: string, designerVersion: string) {
+  sendRequestToUpdateInstallationCount(
+    productId: string,
+    designerVersion: string
+  ) {
     const url = `${API_URI.PRODUCT_MARKETPLACE_DATA}/installation-count/${productId}`;
     const params = new HttpParams().append('designerVersion', designerVersion);
     return this.httpClient.put<number>(url, null, { params });
diff --git a/marketplace-ui/src/app/shared/components/loading-spinner/loading-spinner.component.html b/marketplace-ui/src/app/shared/components/loading-spinner/loading-spinner.component.html
index 1f2484ed..c20d6e26 100644
--- a/marketplace-ui/src/app/shared/components/loading-spinner/loading-spinner.component.html
+++ b/marketplace-ui/src/app/shared/components/loading-spinner/loading-spinner.component.html
@@ -1,4 +1,4 @@
-@if (this.loadingService.isLoading(this.key)) {
+@if (isLoading()) {
   <div  [className]="containerClasses">
     <div class="d-flex justify-content-center" data-title="dot-stretching">
       <div class="stage">
diff --git a/marketplace-ui/src/app/shared/components/loading-spinner/loading-spinner.component.ts b/marketplace-ui/src/app/shared/components/loading-spinner/loading-spinner.component.ts
index e3c11673..a291897e 100644
--- a/marketplace-ui/src/app/shared/components/loading-spinner/loading-spinner.component.ts
+++ b/marketplace-ui/src/app/shared/components/loading-spinner/loading-spinner.component.ts
@@ -11,4 +11,5 @@ export class LoadingSpinnerComponent {
   @Input() key: string = '';
   @Input() containerClasses: string = '';
   loadingService = inject(LoadingService);
+  isLoading = computed(() => this.loadingService.loadingStates()[this.key]);
 }