add transition states to the three different action forms in the page, so we get cool pending ui

app/routes/index.jsx

@@ -10,6 +10,7 @@ import {
   useAuthenticityToken,
   verifyAuthenticityToken,
 } from "remix-utils";
+import { useState } from "react";
 
 const countys = [
   "Ahvenanmaa",
@@ -140,6 +141,7 @@ export async function loader({ request }) {
 }
 
 export default function Index() {
+  const [form, setForm] = useState();
   const data = useLoaderData();
   const transition = useTransition();
 
@@ -168,23 +170,33 @@ export default function Index() {
             <h1>{data.me.username}</h1>
             {data.selfData ? (
               <Form
+                onClick={() => setForm("us")}
                 method="post"
                 className="text-sky-400 hover:text-sky-600 hover:underline"
                 action="/update"
               >
                 <AuthenticityTokenInput />
-                <button type="submit">Update stats</button>
+                <button type="submit">
+                  {transition.state === "submitting" && form === "us"
+                    ? "Updating..."
+                    : "Update"}
+                </button>
               </Form>
             ) : (
               ""
             )}
             <Form
+              onClick={() => setForm("lo")}
               method="post"
               className="text-sky-400 hover:text-sky-600 hover:underline"
               action="/logout"
             >
               <AuthenticityTokenInput />
-              <button type="submit">Logout</button>
+              <button type="submit">
+                {transition.state === "submitting" && form === "lo"
+                  ? "Logging out..."
+                  : "Logout"}
+              </button>
             </Form>
           </div>
         ) : (
@@ -236,10 +248,13 @@ export default function Index() {
               ))}
             </select>
             <button
+              onClick={() => setForm("cs")}
               className="rounded-full border px-4 py-2 shadow shadow-ctp-overlay0 hover:shadow-xl"
               type="submit"
             >
-              {transition.state === "submitting" ? "Submitting..." : "Submit"}
+              {transition.state === "submitting" && form === "cs"
+                ? "Submitting..."
+                : "Submit"}
             </button>
           </Form>
         )