From 0238d7304955ea759313b39d19f131e11a701fc2 Mon Sep 17 00:00:00 2001
From: Andrew Li <andrewli@u.northwestern.edu>
Date: Sun, 19 Jan 2025 15:52:19 -0600
Subject: [PATCH] update button to have loading variant

---
 src/components/EmailList/EmailList.scss | 10 +++++-----
 src/components/EmailList/EmailList.tsx  |  8 ++++++--
 2 files changed, 11 insertions(+), 7 deletions(-)

diff --git a/src/components/EmailList/EmailList.scss b/src/components/EmailList/EmailList.scss
index 150df4b..a6389ac 100644
--- a/src/components/EmailList/EmailList.scss
+++ b/src/components/EmailList/EmailList.scss
@@ -125,10 +125,10 @@
       }
     }
 
-    button {
-      margin-top: 1rem;
-      background-color: #e5e7eb;
-      font-weight: 800;
-    }
+    // button {
+    //   margin-top: 1rem;
+    //   background-color: #e5e7eb;
+    //   font-weight: 800;
+    // }
   }
 }
diff --git a/src/components/EmailList/EmailList.tsx b/src/components/EmailList/EmailList.tsx
index 7d28066..0ac5a34 100644
--- a/src/components/EmailList/EmailList.tsx
+++ b/src/components/EmailList/EmailList.tsx
@@ -1,4 +1,4 @@
-import { Modal, TextInput } from "@mantine/core";
+import { Button, Modal, TextInput } from "@mantine/core";
 import { useForm } from "@mantine/form";
 import { useDisclosure } from "@mantine/hooks";
 
@@ -15,6 +15,7 @@ export const EmailList: React.FC<IEmailList> = () => {
   const [opened, { open, close }] = useDisclosure(false);
 
   const [status, setStatus] = React.useState("");
+  const [isLoading, setIsLoading] = React.useState(false);
 
   const form = useForm({
     mode: "uncontrolled",
@@ -51,6 +52,7 @@ export const EmailList: React.FC<IEmailList> = () => {
               <form
                 onSubmit={form.onSubmit(values => {
                   setStatus("");
+                  setIsLoading(true);
                   axios
                     .post("https://porygon.andrewli.org/wildcat/subscribe", {
                       first_name: values.firstName,
@@ -59,11 +61,13 @@ export const EmailList: React.FC<IEmailList> = () => {
                     })
                     .then(_ => {
                       setStatus("Success!");
+                      setIsLoading(false);
                     })
                     .catch(_ => {
                       setStatus(
                         "Failed! You might already be subscribed, or there was an internal server error.",
                       );
+                      setIsLoading(false);
                     });
                 })}
               >
@@ -100,7 +104,7 @@ export const EmailList: React.FC<IEmailList> = () => {
                   type="email"
                   {...form.getInputProps("email")}
                 />
-                <button type="submit">Register</button>
+                <Button loading={isLoading} variant="filled" color="blue" type="submit">Subscribe</Button>
               </form>
             </div>
           </Modal.Body>