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>

components/AppealCard.tsx

@@ -27,6 +27,7 @@ export default function (props: AppealCardProps) {
   );
   const [action, setAction] = useState("");
   const [feedback, setFeedback] = useState("");
+  const [loading, setLoading] = useState(false)
   const toast = useToast();
 
   useEffect(() => {
@@ -41,6 +42,7 @@ export default function (props: AppealCardProps) {
   }
 
   async function takeAction(action: string) {
+    setLoading(true)
     const actionReq = await fetch(`/api/appeals/${props.id}/${action}`, {
       body: feedback ? JSON.stringify({ feedback }) : "{}",
       headers: {
@@ -50,6 +52,7 @@ export default function (props: AppealCardProps) {
     });
 
     if (actionReq.ok) {
+      setLoading(false)
       toast({
         description: `Appeal ${action === "accept" ? "accepted" : "denied"}`,
         duration: 5000,
@@ -59,6 +62,7 @@ export default function (props: AppealCardProps) {
 
       document.getElementById(`appeal_${props.id}`)?.remove();
     } else {
+      setLoading(false)
       toast({
         description: ((await actionReq.json()) as { error: string }).error,
         duration: 10000,
@@ -68,6 +72,7 @@ export default function (props: AppealCardProps) {
     }
 
     onClose();
+    setLoading(false)
   }
 
   return (
@@ -86,6 +91,8 @@ export default function (props: AppealCardProps) {
           <ModalFooter>
             <Button
               onClick={async () => await takeAction(action.toLowerCase())}
+              isLoading={loading}
+              loadingText='Submitting...'
             >
               Submit
             </Button>

components/GameAppealCard.tsx

@@ -18,9 +18,12 @@ import {
   useDisclosure,
   useToast,
 } from "@chakra-ui/react";
+import { useState } from "react";
 
 export default function (props: GameAppealProps) {
+  const [loading, setLoading] = useState(false)
   async function performAction(action: "accept" | "deny"): Promise<void> {
+    setLoading(true)
     const statsReduction = parseInt(
       (document.getElementById("reductPercentage") as HTMLInputElement).value,
     );
@@ -51,6 +54,8 @@ export default function (props: GameAppealProps) {
             title: "An error occurred...",
           },
     );
+
+    setLoading(false)
   }
 
   const { isOpen, onClose, onOpen } = useDisclosure();
@@ -108,6 +113,8 @@ export default function (props: GameAppealProps) {
               colorScheme="blue"
               ml="8px"
               onClick={async () => await performAction("accept")}
+              isLoading={loading}
+              loadingText='Submitting...'
             >
               Submit
             </Button>

components/InactivityNoticeCard.tsx

@@ -13,11 +13,14 @@ import {
   UnorderedList,
   useToast
 } from "@chakra-ui/react";
+import { useState } from "react";
 
 export default function(props: InactivityNoticeProps) {
   const toast = useToast();
+  const [loading, setLoading] = useState(false)
 
   async function makeDecision(accepted: boolean) {
+    setLoading(true)
     const decisionReq = await fetch(`/api/inactivity/${props.id}`, {
       body: JSON.stringify({ accepted }),
       headers: {
@@ -27,6 +30,7 @@ export default function(props: InactivityNoticeProps) {
     });
 
     if (!decisionReq.ok) {
+      setLoading(false)
       toast({
         description: ((await decisionReq.json()) as { error: string }).error,
         isClosable: true,
@@ -44,6 +48,7 @@ export default function(props: InactivityNoticeProps) {
       title: "Success"
     });
 
+    setLoading(false)
     location.reload();
   }
 
@@ -103,6 +108,8 @@ export default function(props: InactivityNoticeProps) {
           <Button
             colorScheme="red"
             onClick={async () => await makeDecision(false)}
+            isLoading={loading}
+            loadingText='Processing...'
           >
             Deny
           </Button>
@@ -110,6 +117,8 @@ export default function(props: InactivityNoticeProps) {
             colorScheme="blue"
             ml="8px"
             onClick={async () => await makeDecision(true)}
+            isLoading={loading}
+            loadingText='Processing...'
           >
             Accept
           </Button>

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>

components/NewInactivityNotice.tsx

@@ -22,6 +22,7 @@ export default function(props: {
   onClose: () => void;
 }) {
   const [departments, setDepartments] = useState([] as string[]);
+  const [loading, setLoading] = useState(false)
   const toast = useToast();
 
   function reset() {
@@ -33,13 +34,22 @@ export default function(props: {
   }
 
   async function submit() {
+    setLoading(true)
     const start = (document.getElementById("start") as HTMLInputElement).value;
     const end = (document.getElementById("start") as HTMLInputElement).value;
     const reason = (document.getElementById("reason") as HTMLTextAreaElement)
       .value;
 
-    if (!departments.length)
+    if (!departments.length) {
-      return alert("You need to select at least one department!");
+       toast({
+         title: 'Validation Error',
+         description: 'You need to select at least one department',
+         status: "error"
+       })
+
+      setLoading(false)
+      return;
+    }
 
     const inactivityPost = await fetch("/api/inactivity/new", {
       body: JSON.stringify({
@@ -55,6 +65,7 @@ export default function(props: {
     });
 
     if (!inactivityPost.ok) {
+      setLoading(false)
       toast({
         description: ((await inactivityPost.json()) as { error: string }).error,
         duration: 10000,
@@ -74,6 +85,7 @@ export default function(props: {
       title: "Success"
     });
 
+    setLoading(true)
     props.onClose();
   }
 
@@ -116,6 +128,8 @@ export default function(props: {
               colorScheme="blue"
               ml="8px"
               onClick={async () => await submit()}
+              isLoading={loading}
+              loadingText='Submitting...'
             >
               Submit
             </Button>

components/NewInfractionModal.tsx

@@ -157,6 +157,8 @@ export default function (props: { isOpen: boolean; onClose: () => void }) {
             colorScheme="blue"
             ml="8px"
             onClick={async () => await submit()}
+            isLoading={loading}
+            loadingText="Submitting..."
           >
             Submit
           </Button>

components/ReportCard.tsx

@@ -18,6 +18,7 @@ import { useState } from "react";
 
 export default function (props: ReportCardProps) {
   const [attachmentIdx, setAttachmentIdx] = useState(0);
+  const [loading, setLoading] = useState(false)
   const toast = useToast();
   const targetMap: { [k: number]: string } = {};
   const [attachmentsReady, setAttachmentReady] = useState(
@@ -43,6 +44,7 @@ export default function (props: ReportCardProps) {
   }
 
   async function submitActions() {
+    setLoading(true)
     const submitReq = await fetch(`/api/reports/${props.id}/action`, {
       body: JSON.stringify(actionMap),
       headers: {
@@ -52,6 +54,7 @@ export default function (props: ReportCardProps) {
     });
 
     if (!submitReq.ok) {
+      setLoading(false)
       toast({
         description: ((await submitReq.json()) as { error: string }).error,
         status: "error",
@@ -66,6 +69,7 @@ export default function (props: ReportCardProps) {
       status: "success",
       title: "Success",
     });
+    setLoading(false)
   }
 
   return (
@@ -187,6 +191,8 @@ export default function (props: ReportCardProps) {
               <Button
                 colorScheme="blue"
                 onClick={async () => await submitActions()}
+                isLoading={loading}
+                loadingText='Submitting...'
               >
                 Submit
               </Button>

components/Success.tsx

@@ -35,12 +35,10 @@ export default function ({
         </svg>
         <Spacer />
       </Flex>
-      <Center>
       <br />
-      <Heading>{heading}</Heading>
+      <Heading textAlign="center">{heading}</Heading>
       <br />
-      <Text>{message}</Text>
+      <Text textAlign="center">{message}</Text>
-      </Center>
     </Container>
   );
 }