fix(ui): prevent-duplicate-clicks not work

web/app/routes/memshell.tsx

@@ -1,7 +1,7 @@
 import { useQuery } from "@tanstack/react-query";
 import { HomeLayout } from "fumadocs-ui/layouts/home";
 import { LoaderCircle, WandSparklesIcon } from "lucide-react";
-import { useCallback, useState, useTransition } from "react";
+import { useCallback, useRef, useState } from "react";
 import { useForm } from "react-hook-form";
 import { useTranslation } from "react-i18next";
 import { toast } from "sonner";
@@ -89,7 +89,7 @@ export default function MemShellPage() {
   });
 
   const { t } = useTranslation(["common", "memshell"]);
-  const form = useForm({
+  const form = useForm<MemShellFormSchema>({
     resolver: useYupValidationResolver(memShellFormSchema, t),
     defaultValues,
   });
@@ -100,7 +100,7 @@ export default function MemShellPage() {
   >();
   const [generateResult, setGenerateResult] = useState<MemShellResult>();
   const [packMethod, setPackMethod] = useState<string>("");
-  const [isActionPending, startTransition] = useTransition();
+  const submitLockRef = useRef(false);
 
   const submitMemShell = useCallback(
     async (data: MemShellFormSchema) => {
@@ -134,10 +134,15 @@ export default function MemShellPage() {
   );
 
   const onSubmit = useCallback(
-    (data: MemShellFormSchema) => {
-      startTransition(() => {
-        void submitMemShell(data);
-      });
+    async (data: MemShellFormSchema) => {
+      if (submitLockRef.current) return;
+      submitLockRef.current = true;
+
+      try {
+        await submitMemShell(data);
+      } finally {
+        submitLockRef.current = false;
+      }
     },
     [submitMemShell],
   );
@@ -156,8 +161,12 @@ export default function MemShellPage() {
               form={form}
             />
             <PackageConfigCard packerConfig={packerConfig} form={form} />
-            <Button className="w-full" type="submit" disabled={isActionPending}>
-              {isActionPending ? (
+            <Button
+              className="w-full"
+              type="submit"
+              disabled={form.formState.isSubmitting}
+            >
+              {form.formState.isSubmitting ? (
                 <LoaderCircle className="animate-spin" />
               ) : (
                 <WandSparklesIcon />

web/app/routes/probeshell.tsx

@@ -1,7 +1,7 @@
 import { useQuery } from "@tanstack/react-query";
 import { HomeLayout } from "fumadocs-ui/layouts/home";
 import { LoaderCircle, WandSparklesIcon } from "lucide-react";
-import { useState, useTransition } from "react";
+import { useRef, useState } from "react";
 import { useForm } from "react-hook-form";
 import { useTranslation } from "react-i18next";
 import { toast } from "sonner";
@@ -68,10 +68,12 @@ export default function ProbeShellGenerator() {
   >();
   const [generateResult, setGenerateResult] = useState<ProbeShellResult>();
   const [packMethod, setPackMethod] = useState<string>("");
-  const [isActionPending, startTransition] = useTransition();
+  const submitLockRef = useRef(false);
 
   const onSubmit = async (data: ProbeShellFormSchema) => {
-    startTransition(async () => {
+    if (submitLockRef.current) return;
+    submitLockRef.current = true;
+
     try {
       const postData = transformToProbePostData(data);
       const response = await fetch(`${env.API_URL}/api/probe/generate`, {
@@ -98,8 +100,9 @@ export default function ProbeShellGenerator() {
       toast.error(
         t("toast.generateError", { error: (error as Error).message }),
       );
+    } finally {
+      submitLockRef.current = false;
     }
-    });
   };
   return (
     <HomeLayout {...baseOptions()} links={siteConfig.navLinks}>
@@ -111,8 +114,12 @@ export default function ProbeShellGenerator() {
           <div className="w-full xl:w-1/2 flex flex-col gap-2">
             <MainConfigCard form={form} servers={serverConfig} />
             <PackageConfigCard form={form} packerConfig={packerConfig} />
-            <Button className="w-full" type="submit" disabled={isActionPending}>
-              {isActionPending ? (
+            <Button
+              className="w-full"
+              type="submit"
+              disabled={form.formState.isSubmitting}
+            >
+              {form.formState.isSubmitting ? (
                 <LoaderCircle className="animate-spin" />
               ) : (
                 <WandSparklesIcon />