Change loading to false before displaying error message

components/NewInfractionModal.tsx

@@ -10,7 +10,7 @@ import {
   ModalOverlay,
   Select,
   Text,
-  useToast,
+  useToast
 } from "@chakra-ui/react";
 import { useState } from "react";
 
@@ -24,7 +24,7 @@ export default function (props: { isOpen: boolean; onClose: () => void }) {
     if (!props.isOpen) return;
 
     const evidenceElement = document.getElementById(
-      "evidence",
+      "evidence"
     ) as HTMLInputElement;
 
     if (!evidenceElement.files && e.clipboardData?.files) {
@@ -74,7 +74,7 @@ export default function (props: { isOpen: boolean; onClose: () => void }) {
 
     const postReq = await fetch("/api/infractions/new", {
       body: form,
-      method: "POST",
+      method: "POST"
     });
 
     if (postReq.ok) {
@@ -84,13 +84,15 @@ export default function (props: { isOpen: boolean; onClose: () => void }) {
         duration: 5000,
         isClosable: true,
         status: "success",
-        title: "Success",
+        title: "Success"
       });
 
       props.onClose();
       return;
     }
 
+    setLoading(false);
+
     toast({
       description: `Failed to create infraction (${
         ((await postReq.json()) as { error: string }).error
@@ -98,10 +100,8 @@ export default function (props: { isOpen: boolean; onClose: () => void }) {
       duration: 5000,
       isClosable: true,
       status: "error",
-      title: "Error",
+      title: "Error"
     });
-
-    setLoading(false);
   }
 
   return (