Oh yeah I forgot the other half

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>