diff --git a/marketplace-ui/src/app/modules/product/product-detail/product-detail-feedback/product-feedbacks-panel/product-feedback.service.ts b/marketplace-ui/src/app/modules/product/product-detail/product-detail-feedback/product-feedbacks-panel/product-feedback.service.ts
index dba2bac0..b8a363c5 100644
--- a/marketplace-ui/src/app/modules/product/product-detail/product-detail-feedback/product-feedbacks-panel/product-feedback.service.ts
+++ b/marketplace-ui/src/app/modules/product/product-detail/product-detail-feedback/product-feedbacks-panel/product-feedback.service.ts
@@ -156,7 +156,7 @@ export class ProductFeedbackService {
 
   fetchFeedbacks(): void {
     this.getInitFeedbacksObservable().subscribe(response => {
-      this.setInitFeedbacksObservable(response);
+      this.handleFeedbackApiResponse(response);
     });
   }
 
diff --git a/marketplace-ui/src/app/modules/product/product-detail/product-detail.component.html b/marketplace-ui/src/app/modules/product/product-detail/product-detail.component.html
index 9cd167eb..05aa4f76 100644
--- a/marketplace-ui/src/app/modules/product/product-detail/product-detail.component.html
+++ b/marketplace-ui/src/app/modules/product/product-detail/product-detail.component.html
@@ -1,6 +1,5 @@
 <div class="container-fluid min-vh-100">
     <div>
-      
       <app-loading-spinner
         containerClasses="d-flex justify-content-center position-absolute align-items-center w-100 h-100 start-0 rounded overlay-background"
         [key]="LoadingComponentId.DETAIL_PAGE" />
diff --git a/marketplace-ui/src/app/modules/product/product-detail/product-detail.component.ts b/marketplace-ui/src/app/modules/product/product-detail/product-detail.component.ts
index 53d760ea..f8f6728b 100644
--- a/marketplace-ui/src/app/modules/product/product-detail/product-detail.component.ts
+++ b/marketplace-ui/src/app/modules/product/product-detail/product-detail.component.ts
@@ -149,6 +149,7 @@ export class ProductDetailComponent {
   }
 
   ngOnInit(): void {
+    this.loadingService.showLoading(LoadingComponentId.DETAIL_PAGE);
     this.router.navigate([], {
       relativeTo: this.route,
       queryParamsHandling: 'merge',
@@ -161,30 +162,26 @@ export class ProductDetailComponent {
         productDetail: this.getProductDetailObservable(productId),
         productFeedBack: this.productFeedbackService.getInitFeedbacksObservable(),
         rating: this.productStarRatingService.getRatingObservable(productId),
-        
+        userFeedback: this.productFeedbackService.findProductFeedbackOfUser()
       }).subscribe(res => {
         this.handleProductDetail(res.productDetail);
         this.productFeedbackService.handleFeedbackApiResponse(res.productFeedBack);
         res.rating;
         this.updateDropdownSelection();
         this.checkMediaSize();
+        this.route.queryParams.subscribe(params => {
+          this.showPopup = params['showPopup'] === 'true';
+          if (this.showPopup && this.authService.getToken()) {
+            this.appModalService
+              .openAddFeedbackDialog()
+              .then(() => this.removeQueryParam())
+              .catch(() => this.removeQueryParam());
+          }
+        });
+        this.loadingService.hideLoading(LoadingComponentId.DETAIL_PAGE);
       });
-      this.getUserFeedBack();
-    }
-  }
 
-  getUserFeedBack() {
-    this.productFeedbackService.findProductFeedbackOfUser().subscribe(() => {
-      this.route.queryParams.subscribe(params => {
-        this.showPopup = params['showPopup'] === 'true';
-        if (this.showPopup && this.authService.getToken()) {
-          this.appModalService
-            .openAddFeedbackDialog()
-            .then(() => this.removeQueryParam())
-            .catch(() => this.removeQueryParam());
-        }
-      });
-    });
+    }
   }
 
   getProductDetailObservable(productId: string): Observable<ProductDetail> {
diff --git a/marketplace-ui/src/app/modules/product/product.service.ts b/marketplace-ui/src/app/modules/product/product.service.ts
index 511a2ac4..7154e962 100644
--- a/marketplace-ui/src/app/modules/product/product.service.ts
+++ b/marketplace-ui/src/app/modules/product/product.service.ts
@@ -53,13 +53,7 @@ export class ProductService {
     version: string
   ): Observable<ProductDetail> {
     return this.httpClient.get<ProductDetail>(
-      `${API_URI.PRODUCT_DETAILS}/${productId}/${version}`,
-      {
-        context: new HttpContext().set(
-          LoadingComponent,
-          LoadingComponentId.PRODUCT_DETAIL_INFORMATION
-        )
-      }
+      `${API_URI.PRODUCT_DETAILS}/${productId}/${version}`
     );
   }
 
@@ -68,13 +62,7 @@ export class ProductService {
     version: string
   ): Observable<ProductDetail> {
     return this.httpClient.get<ProductDetail>(
-      `${API_URI.PRODUCT_DETAILS}/${productId}/${version}/bestmatch`,
-      {
-        context: new HttpContext().set(
-          LoadingComponent,
-          LoadingComponentId.DETAIL_PAGE
-        )
-      }
+      `${API_URI.PRODUCT_DETAILS}/${productId}/${version}/bestmatch`
     );
   }
 
@@ -84,13 +72,7 @@ export class ProductService {
   ): Observable<ProductDetail> {
     return this.httpClient
       .get<ProductDetail>(
-        `${API_URI.PRODUCT_DETAILS}/${productId}?isShowDevVersion=${isShowDevVersion}`,
-        {
-          context: new HttpContext().set(
-            LoadingComponent,
-            LoadingComponentId.DETAIL_PAGE
-          )
-        }
+        `${API_URI.PRODUCT_DETAILS}/${productId}?isShowDevVersion=${isShowDevVersion}`
       )
       .pipe(delay(5000));
   }
@@ -104,12 +86,7 @@ export class ProductService {
     const params = new HttpParams()
       .append('designerVersion', designerVersion)
       .append('isShowDevVersion', showDevVersion);
-    return this.httpClient.get<VersionData[]>(url, {
-      params,
-      context: new HttpContext()
-        .set(SkipLoading, true)
-        .set(LoadingComponent, LoadingComponentId.PRODUCT_DETAIL_INFORMATION)
-    });
+    return this.httpClient.get<VersionData[]>(url, { params });
   }
 
   sendRequestToUpdateInstallationCount(