From e30aae0bda5eeed9cbabcab227711e6dfee4bd5b Mon Sep 17 00:00:00 2001
From: Kenneth Ng <kenneth.ng.nym@outlook.com>
Date: Wed, 10 May 2023 16:18:29 +0100
Subject: [PATCH] Show loading when submitting download cart

---
 .../public/res/default.json                   |  3 ++-
 .../downloadConfirmDialog.component.test.tsx  | 23 +++++++++++++++++++
 .../downloadConfirmDialog.component.tsx       |  8 +++++--
 3 files changed, 31 insertions(+), 3 deletions(-)

diff --git a/packages/datagateway-download/public/res/default.json b/packages/datagateway-download/public/res/default.json
index 5f08aaba3..4407133bf 100644
--- 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/packages/datagateway-download/src/downloadConfirmation/downloadConfirmDialog.component.test.tsx b/packages/datagateway-download/src/downloadConfirmation/downloadConfirmDialog.component.test.tsx
index 0f56ba7f9..910922a7c 100644
--- a/packages/datagateway-download/src/downloadConfirmation/downloadConfirmDialog.component.test.tsx
+++ b/packages/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
index f38d8160e..c315c6356 100644
--- 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>