Add loading states

app/components/play/GroupCard.tsx

@@ -1,5 +1,5 @@
 import clsx from "clsx";
-import { Form } from "remix";
+import { useFetcher } from "remix";
 import { Button } from "~/components/Button";
 import type {
   LookingActionSchema,
@@ -20,6 +20,8 @@ export function GroupCard({
   ranked?: boolean;
   lookingForMatch: boolean;
 }) {
+  const fetcher = useFetcher();
+
   const buttonText = () => {
     if (type === "LIKES_GIVEN") return "Undo";
     if (type === "NEUTRAL") return "Let's play?";
@@ -34,7 +36,7 @@ export function GroupCard({
   };
 
   return (
-    <Form method="post">
+    <fetcher.Form method="post">
       <div className="play-looking__card">
         {typeof ranked === "boolean" && (
           <div className={clsx("play-looking__ranked-text", { ranked })}>
@@ -64,11 +66,12 @@ export function GroupCard({
             value={buttonValue()}
             tiny
             variant={type === "LIKES_GIVEN" ? "destructive" : undefined}
+            loading={fetcher.state !== "idle"}
           >
             {buttonText()}
           </Button>
         )}
       </div>
-    </Form>
+    </fetcher.Form>
   );
 }

app/routes/play/add-players.tsx

@@ -6,6 +6,7 @@ import {
   LoaderFunction,
   redirect,
   useLoaderData,
+  useTransition,
 } from "remix";
 import { AddPlayers } from "~/components/AddPlayers";
 import { Button } from "~/components/Button";
@@ -57,6 +58,7 @@ export const loader: LoaderFunction = async ({ context }) => {
 
 export default function PlayAddPlayersPage() {
   const data = useLoaderData<AddPlayersLoaderData>();
+  const transition = useTransition();
 
   return (
     <div className="container">
@@ -76,7 +78,9 @@ export default function PlayAddPlayersPage() {
       <div className="play-add-players__button-container">
         {/* TODO: or.... look for match */}
         <Form method="post">
-          <Button type="submit">Look for teammates</Button>
+          <Button type="submit" loading={transition.state !== "idle"}>
+            Look for teammates
+          </Button>
         </Form>
       </div>
     </div>

app/styles/play-looking.css

@@ -45,7 +45,7 @@
   display: flex;
   flex-direction: column;
   gap: var(--s-5);
-  margin-block-start: var(--s-4);
+  margin-block-start: var(--s-5);
 }
 
 .play-looking__column-header {