added loading spinner and download styling

src/app/due-considerations/page.tsx

@@ -7,6 +7,12 @@ import { useSession } from "next-auth/react";
 import { useRouter } from "next/navigation";
 import { useMutation } from "@tanstack/react-query";
 
+const Spinner = () => {
+  return (
+    <div className="w-16 h-16 border-t-4 border-brandgold border-solid rounded-full animate-spin"></div>
+  );
+};
+
 function generateDueConsiderationsS3Folder(userId: string) {
   const timestamp = new Date().toISOString().replace(/[:.-]/g, "");
   const key = `${userId}/${timestamp}/`;
@@ -224,16 +230,26 @@ export default function DueConsiderationsHome() {
         <div className="flex justify-between w-full">
           <div>{uploadMessage}</div>
           <Button
-            disabled={buttonDisabled}
+            disabled={
+              buttonDisabled || isGeneratingUrlLoading || isUploadLoading
+            }
             className="bg-brandblue hover:bg-hoverblue"
             onClick={initiateUpload}
           >
-            Upload
+            {isGeneratingUrlLoading || isUploadLoading
+              ? "Loading..."
+              : "Upload"}
           </Button>
         </div>
-        {downloadUrl ? (
-          <a href={downloadUrl}>Download Due Considerations</a>
-        ) : null}
+        <div className="flex items-center justify-center">
+          {isGeneratingUrlLoading || isUploadLoading ? (
+            <Spinner />
+          ) : downloadUrl ? (
+            <a href={downloadUrl} className="text-blue-500 hover:underline">
+              Download Due Considerations
+            </a>
+          ) : null}
+        </div>
       </div>
     </div>
   );

src/app/globals.css

@@ -97,3 +97,17 @@ body {
     font-feature-settings: "rlig" 1, "calt" 1;
   }
 }
+
+/* These styles are for the loading spinner on the due considerations page*/
+@keyframes spin {
+  0% {
+    transform: rotate(0deg);
+  }
+  100% {
+    transform: rotate(360deg);
+  }
+}
+
+.animate-spin {
+  animation: spin 1s linear infinite;
+}