Show loading when submitting download cart

ral-facilities · May 10, 2023 · e30aae0 · e30aae0
1 parent 1154804
commit e30aae0
Show file tree

Hide file tree

Showing 3 changed files with 31 additions and 3 deletions.
diff --git a/packages/datagateway-download/public/res/default.json b/packages/datagateway-download/public/res/default.json
@@ -73,7 +73,8 @@
     "confirmation_download_name": "Download Name",
     "confirmation_access_method": "Access Method",
     "confirmation_email": "Email Address",
-    "view_my_downloads": "View My Downloads"
+    "view_my_downloads": "View My Downloads",
+    "submitting_cart": "Preparing..."
   },
   "downloadCart": {
     "name": "Name",

diff --git a/...es/datagateway-download/src/downloadConfirmation/downloadConfirmDialog.component.test.tsx b/...es/datagateway-download/src/downloadConfirmation/downloadConfirmDialog.component.test.tsx
@@ -353,6 +353,29 @@ describe('DownloadConfirmDialog', () => {
 
     expect(closeFunction).toHaveBeenCalled();
   });
+
+  it('shows loading status when submitting cart', async () => {
+    (submitCart as jest.Mock).mockReturnValue(
+      new Promise((_) => {
+        // never resolve the promise to simulate loading state
+      })
+    );
+
+    renderWrapper(100, false, true);
+
+    // click on download button to begin download
+    await user.click(
+      await screen.findByRole('button', {
+        name: 'downloadConfirmDialog.download',
+      })
+    );
+
+    const downloadButton = await screen.findByRole('button', {
+      name: 'downloadConfirmDialog.submitting_cart',
+    });
+    expect(downloadButton).toBeInTheDocument();
+    expect(downloadButton).toBeDisabled();
+  });
 });
 
 describe('DownloadConfirmDialog - renders the estimated download speed/time table with varying values', () => {

diff --git a/packages/datagateway-download/src/downloadConfirmation/downloadConfirmDialog.component.tsx b/packages/datagateway-download/src/downloadConfirmation/downloadConfirmDialog.component.tsx
@@ -116,6 +116,7 @@ const DownloadConfirmDialog: React.FC<DownloadConfirmDialogProps> = (
   const {
     data: downloadId,
     mutate: submitCart,
+    isLoading: isSubmittingCart,
     isSuccess: isCartSubmittedSuccessfully,
     isError: hasSubmitCartFailed,
     reset: resetSubmitCartMutation,
@@ -558,13 +559,16 @@ const DownloadConfirmDialog: React.FC<DownloadConfirmDialogProps> = (
                 !emailValid ||
                 (!downloadTypeInfoMap?.has(selectedMethod) ?? true) ||
                 downloadTypeInfoMap?.get(selectedMethod)?.disabled ||
-                methodsUnavailable
+                methodsUnavailable ||
+                isSubmittingCart
               }
               onClick={processDownload}
               color="primary"
               variant="contained"
             >
-              {t('downloadConfirmDialog.download')}
+              {isSubmittingCart
+                ? t('downloadConfirmDialog.submitting_cart')
+                : t('downloadConfirmDialog.download')}
             </Button>
           </DialogActions>
         </div>