Oh yeah I forgot the other half

components/NewGameBan.tsx

@@ -27,6 +27,7 @@ import { useState } from "react";
 export default function(props: { isOpen: boolean; onClose: () => void }) {
   const actionMap: { [k: string]: number } = {};
   const [users, setUsers] = useState([] as string[]);
+  const [loading, setLoading] = useState(true)
   const toast = useToast();
   const fileTypes: { [k: string]: string } = {
     gif: "image/gif",
@@ -79,6 +80,7 @@ export default function(props: { isOpen: boolean; onClose: () => void }) {
   }
 
   async function submit() {
+    setLoading(true)
     const actions: number[] = [];
     const usernames: string[] = [];
 
@@ -92,7 +94,10 @@ export default function(props: { isOpen: boolean; onClose: () => void }) {
     const files = (document.getElementById("evidence") as HTMLInputElement)
       .files;
 
-    if (!files) return;
+    if (!files) {
+      setLoading(false)
+      return
+    }
 
     const [evidence] = files;
 
@@ -111,6 +116,7 @@ export default function(props: { isOpen: boolean; onClose: () => void }) {
     });
 
     if (!submitReq.ok) {
+      setLoading(false)
       toast({
         description: ((await submitReq.json()) as { error: string }).error,
         status: "error",
@@ -135,6 +141,7 @@ export default function(props: { isOpen: boolean; onClose: () => void }) {
     });
 
     if (!fileUpload.ok) {
+      setLoading(false)
       await fetch("/api/reports/recall", {
         body: JSON.stringify({ id }),
         headers: {
@@ -165,6 +172,8 @@ export default function(props: { isOpen: boolean; onClose: () => void }) {
       status: "success",
       title: "Success"
     });
+
+    setLoading(false)
   }
 
   return (
@@ -276,6 +285,8 @@ export default function(props: { isOpen: boolean; onClose: () => void }) {
           }
           ml="8px"
           onClick={async () => await submit()}
+          isLoading={loading}
+          loadingText='Submitting...'
         >
           Submit
         </Button>