feat: add loading screen while waiting for mutateAsync to complete axios request

Author: david-roper

apps/web/src/features/upload/pages/UploadPage.tsx

@@ -1,6 +1,6 @@
 import React, { useState } from 'react';
 
-import { Button, FileDropzone, Heading } from '@douglasneuroinformatics/libui/components';
+import { Button, FileDropzone, Heading, Spinner } from '@douglasneuroinformatics/libui/components';
 import { useDownload, useTranslation } from '@douglasneuroinformatics/libui/hooks';
 import { useNotificationsStore } from '@douglasneuroinformatics/libui/hooks';
 import type { AnyUnilingualFormInstrument } from '@opendatacapture/runtime-core';
@@ -16,6 +16,7 @@ import { createUploadTemplateCSV, processInstrumentCSV, reformatInstrumentData }
 
 export const UploadPage = () => {
   const [file, setFile] = useState<File | null>(null);
+  const [isLoading, setIsLoading] = useState(false);
   const download = useDownload();
   const addNotification = useNotificationsStore((store) => store.addNotification);
   const currentGroup = useAppStore((store) => store.currentGroup);
@@ -31,30 +32,43 @@ export const UploadPage = () => {
   };
 
   const handleInstrumentCSV = async () => {
-    const processedDataResult = await processInstrumentCSV(file!, instrument!);
-    if (processedDataResult.success) {
-      const reformattedData = reformatInstrumentData({
-        currentGroup,
-        data: processedDataResult.value,
-        instrument: instrument!
-      });
-      if (reformattedData.records.length > 1000) {
+    try {
+      setIsLoading(true);
+      const processedDataResult = await processInstrumentCSV(file!, instrument!);
+      if (processedDataResult.success) {
+        const reformattedData = reformatInstrumentData({
+          currentGroup,
+          data: processedDataResult.value,
+          instrument: instrument!
+        });
+        if (reformattedData.records.length > 1000) {
+          addNotification({
+            message: t({
+              en: 'Lots of entries loading, please wait...',
+              fr: 'Beaucoup de données, veuillez patienter...'
+            }),
+            type: 'info'
+          });
+        }
+        await uploadInstrumentRecordsMutation.mutateAsync(reformattedData);
+      } else {
         addNotification({
-          message: t({
-            en: 'Lots of entries loading, please wait...',
-            fr: 'Beaucoup de données, veuillez patienter...'
-          }),
-          type: 'info'
+          message: processedDataResult.message,
+          type: 'error'
         });
       }
-      uploadInstrumentRecordsMutation.mutate(reformattedData);
-    } else {
+      setFile(null);
+    } catch (error) {
       addNotification({
-        message: processedDataResult.message,
+        message: t({
+          en: 'An error has happended within the request',
+          fr: "Une erreur s'est produite lors du téléversement."
+        }),
         type: 'error'
       });
+    } finally {
+      setIsLoading(false);
     }
-    setFile(null);
   };
 
   if (!instrument) {
@@ -71,28 +85,42 @@ export const UploadPage = () => {
           })}
         </Heading>
       </PageHeader>
-      <div className="mx-auto flex w-full max-w-3xl flex-grow flex-col justify-center">
-        <FileDropzone
-          acceptedFileTypes={{
-            'text/csv': ['.csv']
-          }}
-          className="flex h-80 w-full flex-col"
-          file={file}
-          setFile={setFile}
-        />
-        <div className="mt-4 flex justify-between space-x-2">
-          <Button disabled={!(file && instrument)} variant={'primary'} onClick={handleInstrumentCSV}>
-            {t('core.submit')}
-          </Button>
-          <Button className="gap-1.5" disabled={!instrument} variant={'primary'} onClick={handleTemplateDownload}>
-            <DownloadIcon />
-            {t({
-              en: 'Download Template',
-              fr: 'Télécharger le modèle'
-            })}
-          </Button>
+      {!isLoading ? (
+        <div className="mx-auto flex w-full max-w-3xl flex-grow flex-col justify-center">
+          <FileDropzone
+            acceptedFileTypes={{
+              'text/csv': ['.csv']
+            }}
+            className="flex h-80 w-full flex-col"
+            file={file}
+            setFile={setFile}
+          />
+          <div className="mt-4 flex justify-between space-x-2">
+            <Button disabled={!(file && instrument)} variant={'primary'} onClick={handleInstrumentCSV}>
+              {t('core.submit')}
+            </Button>
+            <Button className="gap-1.5" disabled={!instrument} variant={'primary'} onClick={handleTemplateDownload}>
+              <DownloadIcon />
+              {t({
+                en: 'Download Template',
+                fr: 'Télécharger le modèle'
+              })}
+            </Button>
+          </div>
         </div>
-      </div>
+      ) : (
+        <>
+          <div className="mx-auto flex w-full max-w-3xl flex-grow flex-col justify-center">
+            <Spinner className="mx-auto size-1/2"></Spinner>
+            <Heading className="text-center" variant="h3">
+              {t({
+                en: 'Data currently uploading...',
+                fr: 'Données en cours de téléchargement...'
+              })}
+            </Heading>
+          </div>
+        </>
+      )}
     </React.Fragment>
   );
 };