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>

app/routes/data-transfer/start.tsx

@@ -13,6 +13,7 @@ import { useState } from "react";
 
 export default function () {
   const [showCookieBox, setShowCookieBox] = useState(false);
+  const [loading, setLoading] = useState(false)
   return (
     <Container maxW="container.md">
       <Heading pt="36px">Let's get started</Heading>
@@ -31,6 +32,7 @@ export default function () {
       />
       <Button
         onClick={async () => {
+          setLoading(true)
           const createTransferReq = await fetch("/api/data-transfers/create", {
             body: JSON.stringify({
               can_access: !showCookieBox,
@@ -45,6 +47,7 @@ export default function () {
           });
 
           if (!createTransferReq.ok) {
+            setLoading(false)
             useToast()({
               description: (
                 (await createTransferReq.json()) as { error: string }
@@ -62,6 +65,8 @@ export default function () {
           );
         }}
         pt="32px"
+        isLoading={loading}
+        loadingText='Processing...'
       >
         Continue
       </Button>

app/routes/report.tsx

@@ -42,6 +42,7 @@ export default function () {
   const [supportsRequestStreams, setSupportsRequestStreams] = useState(false);
   const toast = useToast();
   const [uploading, setUploading] = useState(false);
+  const [loading, setLoading] = useState(false)
   const fileTypes: { [k: string]: string } = {
     gif: "image/gif",
     m4v: "video/x-m4v",
@@ -75,6 +76,7 @@ export default function () {
   const { logged_in, site_key } = useLoaderData<typeof loader>();
 
   async function submit() {
+    setLoading(true)
     const usernames = (
       document.getElementById("usernames") as HTMLInputElement
     ).value
@@ -83,29 +85,35 @@ export default function () {
     const files = (document.getElementById("evidence") as HTMLInputElement)
       .files;
 
-    if (!usernames.length)
+    if (!usernames.length) {
+      setLoading(false)
       return toast({
         description: "Must provide at least one username",
         isClosable: true,
         status: "error",
         title: "Error",
       });
+    }
 
-    if (!files?.length)
+    if (!files?.length) {
+      setLoading(false)
       return toast({
         description: "Must attach at least one file",
         isClosable: true,
         status: "error",
         title: "Error",
       });
+    }
 
-    if (usernames.length > 20)
+    if (usernames.length > 20) {
+      setLoading(false)
       return toast({
         description: "Only up to twenty users can be reported at a time",
         isClosable: true,
         status: "error",
         title: "Too Many Usernames",
       });
+    }
 
     let turnstileToken = "";
 
@@ -114,13 +122,15 @@ export default function () {
         .getElementsByName("cf-turnstile-response")
         .item(0) as HTMLInputElement;
 
-      if (!tokenElem.value)
+      if (!tokenElem.value) {
+        setLoading(false)
         return toast({
           description: "Please complete the captcha and try again",
           isClosable: true,
           status: "error",
           title: "Captcha not completed",
         });
+      }
 
       turnstileToken = tokenElem.value;
     }
@@ -150,6 +160,7 @@ export default function () {
     });
 
     if (!submitReq.ok) {
+      setLoading(false)
       if (!logged_in) {
         try {
           // @ts-expect-error
@@ -224,6 +235,7 @@ export default function () {
     }
 
     if (shouldRecall) {
+      setLoading(false)
       await fetch("/api/reports/recall", {
         body: JSON.stringify({ id }),
         headers: {
@@ -252,6 +264,7 @@ export default function () {
     });
 
     setShowSuccess(true);
+    setLoading(false)
   }
 
   useEffect(() => {
@@ -319,6 +332,8 @@ export default function () {
             disabled={uploading}
             mr="8px"
             onClick={async () => await submit()}
+            loadingText='Submitting'
+            isLoading={loading}
           >
             Submit
           </Button>