Oh yeah I forgot the other half

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>