Add loading state to Check-in button

app/components/MyForm.tsx

@@ -2,6 +2,7 @@ import { Form, FormProps, useFetcher, useTransition } from "remix";
 
 interface MyFormProps extends FormProps {
   hiddenFields?: Record<string, string>;
+  fetcher?: ReturnType<typeof useFetcher>;
 }
 
 /**
@@ -11,10 +12,9 @@ interface MyFormProps extends FormProps {
  * and disables the form when it's submitting.
  */
 export function MyForm(props: MyFormProps) {
-  const { hiddenFields, children, ...rest } = props;
-  const fetcher = useFetcher();
+  const { hiddenFields, children, fetcher, ...rest } = props;
 
-  const FormComponent = rest.action ? fetcher.Form : Form;
+  const FormComponent = fetcher ? fetcher.Form : Form;
 
   const transition = useTransition();
   return (

app/components/tournament/ActionSectionBeforeStartContent.tsx

@@ -1,5 +1,5 @@
 import * as React from "react";
-import { useLoaderData, useLocation } from "remix";
+import { useFetcher, useLoaderData, useLocation } from "remix";
 import {
   checkInClosesDate,
   TOURNAMENT_TEAM_ROSTER_MIN_SIZE,
@@ -18,6 +18,7 @@ export function ActionSectionBeforeStartContent({
 }: {
   ownTeam: Unpacked<FindTournamentByNameForUrlI["teams"]>;
 }) {
+  const fetcher = useFetcher();
   const tournament = useLoaderData<FindTournamentByNameForUrlI>();
   const location = useLocation();
 
@@ -43,7 +44,7 @@ export function ActionSectionBeforeStartContent({
   if (ownTeam.checkedInTime) {
     return (
       <ActionSectionWrapper icon="success">
-        <SuccessIcon /> Your team is succesfully checked in!
+        <SuccessIcon /> Your team is checked in!
       </ActionSectionWrapper>
     );
   }
@@ -110,8 +111,14 @@ export function ActionSectionBeforeStartContent({
             ownTeam.id
           }/check-in`}
           className="tournament__action-section__button-container"
+          fetcher={fetcher}
         >
-          <Button variant="outlined" loadingText="Checking-in..." type="submit">
+          <Button
+            variant="outlined"
+            loadingText="Checking-in..."
+            type="submit"
+            loading={fetcher.state !== "idle"}
+          >
             Check-in
           </Button>
         </MyForm>