Clear form textarea after successful post submission

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

1 files changed, 12 insertions, 1 deletions

diff --git a/app/routes/home.tsx b/app/routes/home.tsx
index 51d6f04..58004c9 100644
--- a/app/routes/home.tsx
+++ b/app/routes/home.tsx
@@ -1,3 +1,4 @@
+import { useEffect, useRef } from "react";
 import { Form, redirect, useNavigation } from "react-router";
 import type { Route } from "./+types/home";
 import { createPost, listPosts } from "~/lib/db.server";
@@ -27,6 +28,16 @@ export default function Home({ loaderData, actionData }: Route.ComponentProps) {
   const { posts } = loaderData;
   const navigation = useNavigation();
   const isSubmitting = navigation.state === "submitting";
+  const formRef = useRef<HTMLFormElement>(null);
+  const wasSubmitting = useRef(false);
+
+  useEffect(() => {
+    if (navigation.state === "submitting") wasSubmitting.current = true;
+    if (wasSubmitting.current && navigation.state === "idle" && !actionData?.error) {
+      formRef.current?.reset();
+      wasSubmitting.current = false;
+    }
+  }, [navigation.state, actionData?.error]);
 
   return (
     <div className="wrap">
@@ -35,7 +46,7 @@ export default function Home({ loaderData, actionData }: Route.ComponentProps) {
       </header>
 
       <div className="compose">
-        <Form method="post">
+        <Form method="post" ref={formRef}>
           <textarea
             name="content"
             placeholder="Markdown で投稿..."