From b72fe362ef86f333ebe177b3f97ae5c06872ec8c Mon Sep 17 00:00:00 2001
From: Kalle <38327916+Sendouc@users.noreply.github.com>
Date: Sun, 13 Feb 2022 10:37:51 +0200
Subject: [PATCH] Add loading states

---
 app/components/play/GroupCard.tsx | 9 ++++++---
 app/routes/play/add-players.tsx   | 6 +++++-
 app/styles/play-looking.css       | 2 +-
 3 files changed, 12 insertions(+), 5 deletions(-)

diff --git a/app/components/play/GroupCard.tsx b/app/components/play/GroupCard.tsx
index 1a555d773..f6d6b7a6b 100644
--- a/app/components/play/GroupCard.tsx
+++ b/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>
   );
 }
diff --git a/app/routes/play/add-players.tsx b/app/routes/play/add-players.tsx
index 4e56fb38d..ffddeee82 100644
--- a/app/routes/play/add-players.tsx
+++ b/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>
diff --git a/app/styles/play-looking.css b/app/styles/play-looking.css
index 3a96a1b6e..26604183c 100644
--- a/app/styles/play-looking.css
+++ b/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 {