Use SubmitButton in various places

app/components/SubmitButton.tsx

@@ -2,6 +2,7 @@ import { type FetcherWithComponents, useTransition } from "@remix-run/react";
 import { Button, type ButtonProps } from "./Button";
 
 interface SubmitButtonProps extends ButtonProps {
+  /** If the page has multiple forms you can pass in fetcher.state to differentiate when this SubmitButton should be in submitting state */
   state?: FetcherWithComponents<any>["state"];
   _action?: string;
 }

app/routes/calendar/new.tsx

@@ -63,6 +63,7 @@ import {
 import { Tags } from "./components/Tags";
 import { isDefined } from "~/utils/arrays";
 import { CrossIcon } from "~/components/icons/Cross";
+import { SubmitButton } from "~/components/SubmitButton";
 
 const MIN_DATE = new Date(Date.UTC(2015, 4, 28));
 
@@ -243,9 +244,7 @@ export default function CalendarNewEventPage() {
         <TagsAdder />
         <BadgesAdder />
         <TOToolsAndMapPool />
-        <Button type="submit" className="mt-4">
-          {t("actions.submit")}
-        </Button>
+        <SubmitButton className="mt-4">{t("actions.submit")}</SubmitButton>
       </Form>
     </Main>
   );

app/routes/plus/suggestions/new.tsx

@@ -1,5 +1,5 @@
 import { Form, useMatches } from "@remix-run/react";
-import { Button, LinkButton } from "~/components/Button";
+import { LinkButton } from "~/components/Button";
 import { Dialog } from "~/components/Dialog";
 import { Redirect } from "~/components/Redirect";
 import {
@@ -32,6 +32,7 @@ import type { UserWithPlusTier } from "~/db/types";
 import { FormMessage } from "~/components/FormMessage";
 import { atOrError } from "~/utils/arrays";
 import { requireUser, useUser } from "~/modules/auth";
+import { SubmitButton } from "~/components/SubmitButton";
 
 const commentActionSchema = z.object({
   tier: z.preprocess(
@@ -154,9 +155,9 @@ export default function PlusNewSuggestionModalPage() {
         </div>
         <CommentTextarea maxLength={PlUS_SUGGESTION_FIRST_COMMENT_MAX_LENGTH} />
         <div className="plus__modal-buttons">
-          <Button type="submit" disabled={Boolean(selectedUserErrorMessage)}>
+          <SubmitButton disabled={Boolean(selectedUserErrorMessage)}>
             Submit
-          </Button>
+          </SubmitButton>
           <LinkButton
             to={plusSuggestionPage()}
             variant="minimal-destructive"

app/routes/u.$identifier/builds/new.tsx

@@ -13,6 +13,7 @@ import { GearCombobox, WeaponCombobox } from "~/components/Combobox";
 import { Image } from "~/components/Image";
 import { Label } from "~/components/Label";
 import { RequiredHiddenInput } from "~/components/RequiredHiddenInput";
+import { SubmitButton } from "~/components/SubmitButton";
 import { BUILD, EMPTY_BUILD } from "~/constants";
 import { db } from "~/db";
 import type { GearType } from "~/db/types";
@@ -198,9 +199,7 @@ export default function NewBuildPage() {
         <TitleInput />
         <DescriptionTextarea />
         <ModeCheckboxes />
-        <Button type="submit" className="mt-4">
-          {t("actions.submit")}
-        </Button>
+        <SubmitButton className="mt-4">{t("actions.submit")}</SubmitButton>
       </Form>
     </div>
   );

app/routes/u.$identifier/edit.tsx

@@ -4,13 +4,7 @@ import {
   type LinksFunction,
   type LoaderArgs,
 } from "@remix-run/node";
-import {
-  Form,
-  Link,
-  useLoaderData,
-  useMatches,
-  useTransition,
-} from "@remix-run/react";
+import { Form, Link, useLoaderData, useMatches } from "@remix-run/react";
 import { countries } from "countries-list";
 import * as React from "react";
 import { Trans } from "react-i18next";
@@ -24,6 +18,7 @@ import { TrashIcon } from "~/components/icons/Trash";
 import { WeaponImage } from "~/components/Image";
 import { Input } from "~/components/Input";
 import { Label } from "~/components/Label";
+import { SubmitButton } from "~/components/SubmitButton";
 import { USER } from "~/constants";
 import { db } from "~/db";
 import { type User } from "~/db/types";
@@ -198,7 +193,6 @@ export default function UserEditPage() {
   const [, parentRoute] = useMatches();
   invariant(parentRoute);
   const parentRouteData = parentRoute.data as UserPageLoaderData;
-  const transition = useTransition();
 
   return (
     <div className="half-width">
@@ -216,13 +210,7 @@ export default function UserEditPage() {
             more information.
           </Trans>
         </FormMessage>
-        <Button
-          loadingText={t("common:actions.saving")}
-          type="submit"
-          loading={transition.state === "submitting"}
-        >
-          {t("common:actions.save")}
-        </Button>
+        <SubmitButton>{t("common:actions.save")}</SubmitButton>
         <FormErrors namespace="user" />
       </Form>
     </div>

app/routes/u.$identifier/results/highlights.tsx

@@ -1,9 +1,8 @@
 import { type ActionFunction, redirect } from "@remix-run/node";
-import { Form, useMatches, useTransition } from "@remix-run/react";
+import { Form, useMatches } from "@remix-run/react";
 import { useTranslation } from "~/hooks/useTranslation";
 import invariant from "tiny-invariant";
 import { z } from "zod";
-import { Button } from "~/components/Button";
 import { FormErrors } from "~/components/FormErrors";
 import { db } from "~/db";
 import { requireUser } from "~/modules/auth";
@@ -15,6 +14,7 @@ import {
   HIGHLIGHT_CHECKBOX_NAME,
   UserResultsTable,
 } from "./components/UserResultsTable";
+import { SubmitButton } from "~/components/SubmitButton";
 
 const editHighlightsActionSchema = z.object({
   [HIGHLIGHT_CHECKBOX_NAME]: z.optional(
@@ -44,7 +44,6 @@ export const action: ActionFunction = async ({ request }) => {
 export default function ResultHighlightsEditPage() {
   const { t } = useTranslation(["common", "user"]);
   const [, parentRoute] = useMatches();
-  const transition = useTransition();
 
   invariant(parentRoute);
   const userPageData = parentRoute.data as UserPageLoaderData;
@@ -62,13 +61,7 @@ export default function ResultHighlightsEditPage() {
           />
         </fieldset>
       </div>
-      <Button
-        loadingText={t("common:actions.saving")}
-        type="submit"
-        loading={transition.state === "submitting"}
-      >
-        {t("common:actions.save")}
-      </Button>
+      <SubmitButton>{t("common:actions.save")}</SubmitButton>
       <FormErrors namespace="user" />
     </Form>
   );

public/locales/da/common.json

@@ -35,7 +35,6 @@
 
   "actions.save": "Gem",
   "actions.saveChanges": "Gem ændringer",
-  "actions.saving": "Gemmer...",
   "actions.submit": "Fremlæg",
   "actions.edit": "Rediger",
   "actions.add": "Tilføj",

public/locales/de/common.json

@@ -35,7 +35,6 @@
 
   "actions.save": "Speichern",
   "actions.saveChanges": "Änderungen speichern",
-  "actions.saving": "Speichert...",
   "actions.submit": "Senden",
   "actions.edit": "Bearbeiten",
   "actions.add": "Hinzufügen",

public/locales/en/common.json

@@ -35,7 +35,6 @@
 
   "actions.save": "Save",
   "actions.saveChanges": "Save changes",
-  "actions.saving": "Saving...",
   "actions.submit": "Submit",
   "actions.edit": "Edit",
   "actions.add": "Add",

public/locales/es-ES/common.json

@@ -19,7 +19,6 @@
   "footer.thanks": "Gracias a los Patrons por su apoyo",
 
   "actions.save": "Guardar",
-  "actions.saving": "Guardando...",
   "actions.submit": "Finalizar",
   "actions.edit": "Editar",
   "actions.add": "Añadir",

public/locales/es-US/common.json

@@ -19,7 +19,6 @@
   "footer.thanks": "Gracias a los Patrons por su apoyo",
 
   "actions.save": "Guardar",
-  "actions.saving": "Guardando...",
   "actions.submit": "Finalizar",
   "actions.edit": "Editar",
   "actions.add": "Añadir",

public/locales/fr/common.json

@@ -19,7 +19,6 @@
   "footer.thanks": "Merci aux patrons pour le soutien",
 
   "actions.save": "Sauvegarder",
-  "actions.saving": "Sauvegarde...",
   "actions.submit": "Envoyer",
   "actions.edit": "Éditer",
   "actions.add": "Ajouter",

public/locales/it/common.json

@@ -31,7 +31,6 @@
   "footer.thanks": "Mille grazie ai supporter su Patreon!",
   "actions.save": "Salva",
   "actions.saveChanges": "Salva cambiamenti",
-  "actions.saving": "Salvataggio in corso...",
   "actions.submit": "Invia",
   "actions.edit": "Modifica",
   "actions.add": "Aggiungi",

public/locales/ja/common.json

@@ -32,7 +32,6 @@
 
   "actions.save": "保存",
   "actions.saveChanges": "変更を保存",
-  "actions.saving": "保存中...",
   "actions.submit": "送信",
   "actions.edit": "編集",
   "actions.add": "追加",

public/locales/ko/common.json

@@ -15,7 +15,6 @@
   "footer.patreon.subtitle": "지원",
   "footer.thanks": "Patreon 후원자들에게 갑사드립니다",
   "actions.save": "저장하기",
-  "actions.saving": "저장 중...",
   "actions.submit": "제출",
   "actions.edit": "편집",
   "actions.add": "추가",

public/locales/nl/common.json

@@ -21,7 +21,6 @@
   "footer.thanks": "Met dank aan alle patrons voor de steun",
 
   "actions.save": "Opslaan",
-  "actions.saving": "Opslaan...",
   "actions.submit": "Verzenden",
   "actions.edit": "Bewerken",
   "actions.add": "Toevoegen",

public/locales/ru/common.json

@@ -35,7 +35,6 @@
 
   "actions.save": "Сохранить",
   "actions.saveChanges": "Сохранить изменения",
-  "actions.saving": "Сохранение...",
   "actions.submit": "Опубликовать",
   "actions.edit": "Изменить",
   "actions.add": "Добавить",

public/locales/zh/common.json

@@ -33,7 +33,6 @@
 
   "actions.save": "保存",
   "actions.saveChanges": "保存更改内容",
-  "actions.saving": "保存中...",
   "actions.submit": "确认",
   "actions.edit": "编辑",
   "actions.add": "添加",