diff --git a/client/src/Post.tsx b/client/src/Post.tsx index 6fd555e..516caf9 100644 --- a/client/src/Post.tsx +++ b/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 @@ -72,6 +75,7 @@ export function Post({ name="intent" value="deletePost" type={"submit"} + disabled={busy} > delete diff --git a/client/src/Profile.tsx b/client/src/Profile.tsx index 321faa3..63aae03 100644 --- a/client/src/Profile.tsx +++ b/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
Error
; } + const navigation = useNavigation(); + const busy = navigation.state === "submitting"; return (
@@ -42,7 +44,12 @@ export function Profile({ self }: IProfileProps) { placeholder={"Write something!"} name="text" /> - diff --git a/client/src/ProfileCard.tsx b/client/src/ProfileCard.tsx index f3b1d60..a8bbef6 100644 --- a/client/src/ProfileCard.tsx +++ b/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 (
@@ -33,6 +36,7 @@ export function ProfileCard({ type={"submit"} name={"intent"} value={"unfollow"} + disabled={busy} > unfollow @@ -44,6 +48,7 @@ export function ProfileCard({ type={"submit"} name={"intent"} value={"follow"} + disabled={busy} > follow