Oh yeah I forgot the other half

app/routes/appeals.tsx

@@ -64,9 +64,11 @@ export default function () {
   const pageProps = useLoaderData<typeof loader>();
   const { isOpen, onClose, onOpen } = useDisclosure();
   const [showSuccess, setShowSuccess] = useState(false);
+  const [loading, setLoading] = useState(false)
   const toast = useToast();
 
   async function submit() {
+    setLoading(true)
     const learned = (document.getElementById("learned") as HTMLInputElement)
       .value;
     const whyBanned = (document.getElementById("whyBanned") as HTMLInputElement)
@@ -86,7 +88,8 @@ export default function () {
       method: "POST",
     }).catch(() => {});
 
-    if (!submitReq)
+    if (!submitReq) {
+      setLoading(false)
       return toast({
         description: "Please check your internet and try again",
         duration: 10000,
@@ -94,8 +97,10 @@ export default function () {
         status: "error",
         title: "Request Failed",
       });
+    }
 
-    if (!submitReq.ok)
+    if (!submitReq.ok) {
+      setLoading(false)
       return toast({
         description: ((await submitReq.json()) as { error: string }).error,
         duration: 10000,
@@ -103,8 +108,10 @@ export default function () {
         status: "error",
         title: "Error",
       });
+    }
 
     setShowSuccess(true);
+    setLoading(false)
   }
 
   async function toggle(active: boolean) {
@@ -232,6 +239,8 @@ export default function () {
       <Button
         disabled={pageProps.can_appeal}
         onClick={async () => await submit()}
+        loadingText='Submitting'
+        isLoading={loading}
       >
         Submit
       </Button>