Display spinner when uploading file (#15)

Author: gfrn

src/routes/UploadModel.test.tsx

@@ -13,6 +13,7 @@ vi.mock("react-router", async (importOriginal) => {
   return {
     ...actual,
     useNavigate: () => mockUseNavigate,
+    useParams: () => ({ propId: "cm1", visitId: 1 }),
   };
 });
 
@@ -42,7 +43,7 @@ describe("Upload Model", () => {
 
     await userEvent.click(screen.getByRole("button", { name: "Submit" }));
 
-    await waitFor(() => expect(mockUseNavigate).toHaveBeenCalledWith(-1));
+    await waitFor(() => expect(mockUseNavigate).toHaveBeenCalledWith("/proposals/cm1/sessions/1"));
   });
 
   it("should display toast if upload fails and server returns error details", async () => {

src/routes/UploadModel.tsx

@@ -1,5 +1,5 @@
 import { Button, Divider, Heading, useToast, VStack, Text, Code } from "@chakra-ui/react";
-import { FormEvent, useCallback } from "react";
+import { FormEvent, useCallback, useState } from "react";
 import { useNavigate, useParams } from "react-router";
 
 import "styles/upload.css";
@@ -8,21 +8,25 @@ import { client } from "utils/api/client";
 export const UploadModelPage = () => {
   const { propId, visitId } = useParams();
   const toast = useToast();
+  const [loading, setLoading] = useState(false);
 
   const navigate = useNavigate();
 
   const uploadFile = useCallback(
     async (e: FormEvent<HTMLFormElement>) => {
       e.preventDefault();
       const data = new FormData(e.currentTarget);
+
+      setLoading(true);
       const resp = await client.post(
         `proposals/${propId}/sessions/${visitId}/processingModel`,
         data
       );
+      setLoading(false);
 
       if (resp.status === 200) {
         toast({ status: "success", title: "Model successfully uploaded!" });
-        navigate(-1);
+        navigate(`/proposals/${propId}/sessions/${visitId}`);
       } else {
         toast({
           status: "error",
@@ -44,7 +48,7 @@ export const UploadModelPage = () => {
       </Text>
       <form onSubmit={uploadFile} encType='multipart/form-data'>
         <input name='file' data-testid='file-input' type='file' accept='.h5' />
-        <Button w='8em' type='submit'>
+        <Button w='8em' type='submit' loadingText='Uploading' isLoading={loading}>
           Submit
         </Button>
       </form>