update service

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));
       }
     })
   );

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]);
-  }
 }

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,18 +40,26 @@ 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(
     productId: string,
     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 });

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">

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]);
 }