Oh yeah I forgot the other half

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>