Oh yeah I forgot the other half

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)
-      return alert("You need to select at least one department!");
+    if (!departments.length) {
+       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>