Disable edit vote button when mutation loading

components/plus/ChangeVoteButtons.tsx

@@ -8,10 +8,12 @@ export function ChangeVoteButtons({
   score,
   isSameRegion,
   editVote,
+  isLoadingMutation,
 }: {
   score: number;
   isSameRegion: boolean;
   editVote: (score: number) => void;
+  isLoadingMutation: boolean;
 }) {
   const [editing, setEditing] = useState(false);
   const [currentScore, setCurrentScore] = useState(score);
@@ -48,6 +50,7 @@ export function ChangeVoteButtons({
             editVote(currentScore);
             setEditing(false);
           }}
+          disabled={isLoadingMutation}
         >
           Save
         </Button>

hooks/plus.ts

@@ -88,18 +88,18 @@ export default function usePlusVoting() {
       },
     }
   );
-  const { mutate: editVoteMutate, status: editVoteStatus } = trpc.useMutation(
-    "plus.editVote",
-    {
-      onSuccess() {
-        toast(getToastOptions("Successfully edited vote", "success"));
-        utils.invalidateQuery(["plus.votedUserScores"]);
-      },
-      onError(error) {
-        toast(getToastOptions(error.message, "error"));
-      },
-    }
-  );
+  const {
+    mutate: editVoteMutate,
+    isLoading: isLoadingEditVote,
+  } = trpc.useMutation("plus.editVote", {
+    onSuccess() {
+      toast(getToastOptions("Successfully edited vote", "success"));
+      utils.invalidateQuery(["plus.votedUserScores"]);
+    },
+    onError(error) {
+      toast(getToastOptions(error.message, "error"));
+    },
+  });
 
   const ownPlusStatus = statuses?.find((status) => status.user.id === user?.id);
 
@@ -145,5 +145,6 @@ export default function usePlusVoting() {
     voteStatus,
     votedUsers: getVotedUsers(),
     editVote: editVoteMutate,
+    isLoadingEditVote,
   };
 }

pages/plus/voting.tsx

@@ -30,6 +30,7 @@ export default function PlusVotingPage() {
     voteStatus,
     votedUsers,
     editVote,
+    isLoadingEditVote,
   } = usePlusVoting();
 
   useEffect(() => {
@@ -68,6 +69,7 @@ export default function PlusVotingPage() {
                   editVote={(score) =>
                     editVote({ userId: votedUser.userId, score })
                   }
+                  isLoadingMutation={isLoadingEditVote}
                 />
               </Fragment>
             );