more busy stuff

client/src/Post.tsx

@@ -1,5 +1,5 @@
 import "./Post.scss";
-import { Form, Link, useSubmit } from "react-router-dom";
+import { Form, Link, useNavigation, useSubmit } from "react-router-dom";
 import { useState } from "react";
 
 import "./PostForm.scss";
@@ -19,6 +19,8 @@ export function Post({
 }) {
     const [editing, setEditing] = useState(false);
     const submit = useSubmit();
+    const navigation = useNavigation();
+    const busy = navigation.state === "submitting";
 
     if (editing) {
         return (
@@ -38,6 +40,7 @@ export function Post({
                             setEditing(false);
                             submit(e.currentTarget);
                         }}
+                        disabled={busy}
                     >
                         save
                     </button>
@@ -72,6 +75,7 @@ export function Post({
                                 name="intent"
                                 value="deletePost"
                                 type={"submit"}
+                                disabled={busy}
                             >
                                 delete
                             </button>

client/src/Profile.tsx

@@ -1,4 +1,4 @@
-import { Form, Link, useLoaderData } from "react-router-dom";
+import { Form, Link, useLoaderData, useNavigation } from "react-router-dom";
 import { LoaderToType, profileLoader } from "./loaders";
 import { isError } from "./api/dto";
 import { Post } from "./Post";
@@ -28,6 +28,8 @@ export function Profile({ self }: IProfileProps) {
     if (!user || isError(user)) {
         return <div>Error</div>;
     }
+    const navigation = useNavigation();
+    const busy = navigation.state === "submitting";
 
     return (
         <div className={"profileView"}>
@@ -42,7 +44,12 @@ export function Profile({ self }: IProfileProps) {
                             placeholder={"Write something!"}
                             name="text"
                         />
-                        <button name="intent" value="post" type="submit">
+                        <button
+                            name="intent"
+                            value="post"
+                            type="submit"
+                            disabled={busy}
+                        >
                             Post
                         </button>
                     </Form>

client/src/ProfileCard.tsx

@@ -1,5 +1,5 @@
 import "./ProfileCard.scss";
-import { Form, Link } from "react-router-dom";
+import { Form, Link, useNavigation } from "react-router-dom";
 
 export function ProfileCard({
     username,
@@ -14,6 +14,9 @@ export function ProfileCard({
     actions: boolean;
     alreadyFollowing: boolean;
 }) {
+    const navigation = useNavigation();
+    const busy = navigation.state === "submitting";
+
     return (
         <div className={"profileCard"}>
             <div className={"profileInfo"}>
@@ -33,6 +36,7 @@ export function ProfileCard({
                                 type={"submit"}
                                 name={"intent"}
                                 value={"unfollow"}
+                                disabled={busy}
                             >
                                 unfollow
                             </button>
@@ -44,6 +48,7 @@ export function ProfileCard({
                                 type={"submit"}
                                 name={"intent"}
                                 value={"follow"}
+                                disabled={busy}
                             >
                                 follow
                             </button>