fix loader issue for submit report page

fylein · Jan 13, 2025 · ae841ca · ae841ca
1 parent 09a3422
commit ae841ca
Show file tree

Hide file tree

Showing 2 changed files with 44 additions and 26 deletions.
diff --git a/src/app/fyle/my-view-report/my-view-report.page.html b/src/app/fyle/my-view-report/my-view-report.page.html
@@ -328,13 +328,21 @@
       <ion-button
         class="fy-footer-cta fy-footer-cta--primary"
         *ngIf="canResubmitReport$ | async"
+        [disabled]="submitReportLoader"
+        appFormButtonValidation
+        [loadingText]="'Resubmitting'"
+        [loading]="submitReportLoader"
         (click)="resubmitReport()"
       >
         Resubmit Report
       </ion-button>
       <ion-button
         class="fy-footer-cta fy-footer-cta--primary"
         *ngIf="(report$|async)?.state === 'DRAFT' && (report$|async)?.num_expenses !== 0"
+        [disabled]="submitReportLoader"
+        appFormButtonValidation
+        [loadingText]="'Summitting'"
+        [loading]="submitReportLoader"
         (click)="submitReport()"
       >
         Submit Report

diff --git a/src/app/fyle/my-view-report/my-view-report.page.ts b/src/app/fyle/my-view-report/my-view-report.page.ts
@@ -113,6 +113,8 @@ export class MyViewReportPage {
 
   hardwareBackButtonAction: Subscription;
 
+  submitReportLoader = false;
+
   constructor(
     private activatedRoute: ActivatedRoute,
     private reportService: ReportService,
@@ -433,38 +435,46 @@ export class MyViewReportPage {
   }
 
   resubmitReport(): void {
-    this.spenderReportsService.resubmit(this.reportId).subscribe(() => {
-      this.router.navigate(['/', 'enterprise', 'my_reports']);
-      const message = `Report resubmitted successfully.`;
-      this.matSnackBar.openFromComponent(ToastMessageComponent, {
-        ...this.snackbarProperties.setSnackbarProperties('success', { message }),
-        panelClass: ['msb-success-with-camera-icon'],
-      });
-      this.trackingService.showToastMessage({ ToastContent: message });
-    });
-  }
-
-  submitReport(): void {
-    this.spenderReportsService.submit(this.reportId).subscribe({
-      next: () => {
+    this.submitReportLoader = true;
+    this.spenderReportsService
+      .resubmit(this.reportId)
+      .pipe(finalize(() => (this.submitReportLoader = false)))
+      .subscribe(() => {
         this.router.navigate(['/', 'enterprise', 'my_reports']);
-        const message = `Report submitted successfully.`;
+        const message = `Report resubmitted successfully.`;
         this.matSnackBar.openFromComponent(ToastMessageComponent, {
           ...this.snackbarProperties.setSnackbarProperties('success', { message }),
           panelClass: ['msb-success-with-camera-icon'],
         });
         this.trackingService.showToastMessage({ ToastContent: message });
-      },
-      error: (error) => {
-        // Capture error with additional details in Sentry
-        Sentry.captureException(error, {
-          extra: {
-            reportId: this.reportId,
-            errorResponse: error,
-          },
-        });
-      },
-    });
+      });
+  }
+
+  submitReport(): void {
+    this.submitReportLoader = true;
+    this.spenderReportsService
+      .submit(this.reportId)
+      .pipe(finalize(() => (this.submitReportLoader = false)))
+      .subscribe({
+        next: () => {
+          this.router.navigate(['/', 'enterprise', 'my_reports']);
+          const message = `Report submitted successfully.`;
+          this.matSnackBar.openFromComponent(ToastMessageComponent, {
+            ...this.snackbarProperties.setSnackbarProperties('success', { message }),
+            panelClass: ['msb-success-with-camera-icon'],
+          });
+          this.trackingService.showToastMessage({ ToastContent: message });
+        },
+        error: (error) => {
+          // Capture error with additional details in Sentry
+          Sentry.captureException(error, {
+            extra: {
+              reportId: this.reportId,
+              errorResponse: error,
+            },
+          });
+        },
+      });
   }
 
   getTransactionRoute(category: string, canEdit: boolean): string {