added transitions to forms and fixed classname being class for some reason?

app/routes/index.jsx

@@ -1,4 +1,10 @@
-import { useLoaderData, useActionData, Form, Link } from "@remix-run/react";
+import {
+  useLoaderData,
+  useActionData,
+  Form,
+  Link,
+  useTransition,
+} from "@remix-run/react";
 import {
   unstable_createFileUploadHandler,
   unstable_parseMultipartFormData,
@@ -115,6 +121,7 @@ export async function loader({ request }) {
 export default function Index() {
   const data = useLoaderData();
   const errors = useActionData();
+  const transition = useTransition();
   const [search, setSearch] = useState("");
 
   return (
@@ -176,7 +183,7 @@ export default function Index() {
             className=" hover rounded-full bg-ctp-surface1 py-2 px-4 text-ctp-flamingo shadow shadow-ctp-overlay0 hover:bg-ctp-surface2 hover:underline"
             type="submit"
           >
-            Create!
+            {transition.state === "submitting" ? "Creating..." : "Create!"}
           </button>
         </Form>
       </div>

app/routes/threads/$threadId.jsx

@@ -4,7 +4,13 @@ import {
   unstable_parseMultipartFormData,
   json,
 } from "@remix-run/node";
-import { useLoaderData, Form, useActionData, Link } from "@remix-run/react";
+import {
+  useLoaderData,
+  Form,
+  useActionData,
+  Link,
+  useTransition,
+} from "@remix-run/react";
 import { useEffect, useState } from "react";
 import Overlay from "~/components/Overlay";
 import { ThreadReply } from "~/components/ThreadReply";
@@ -123,6 +129,7 @@ export async function loader({ params }) {
 export default function Thread() {
   const data = useLoaderData();
   const actionData = useActionData();
+  const transition = useTransition();
   const [replying, setReplying] = useState();
   const navigate = useNavigate();
 
@@ -224,7 +231,7 @@ export default function Thread() {
           </label>
           <p className="text-ctp-red">{actionData?.image}</p>
         </label>
-        <details class="flex items-center justify-center duration-300">
+        <details className="flex items-center justify-center duration-300">
           <summary className="cursor-pointer text-center font-semibold text-ctp-subtext0">
             Manual replying (needed when JS is disabled)
           </summary>
@@ -244,7 +251,7 @@ export default function Thread() {
           className="rounded-full bg-ctp-crust px-4 py-2 shadow"
           type="submit"
         >
-          Submit
+          {transition.state === "submitting" ? "Submitting..." : "Submit"}
         </button>
       </Form>
     </Overlay>