fix: add loading state to prevent duplicate flow creation on click

src/frontend/src/modals/templatesModal/components/TemplateGetStartedCardComponent/index.tsx

@@ -1,3 +1,4 @@
+import { useState } from "react";
 import { useParams } from "react-router-dom";
 import ForwardedIconComponent from "@/components/common/genericIconComponent";
 import { convertTestName } from "@/components/common/storeCardComponent/utils/convert-test-name";
@@ -22,12 +23,22 @@ export default function TemplateGetStartedCardComponent({
 
   const folderIdUrl = folderId ?? myCollectionId;
 
+  const [loading, setLoading] = useState(false);
+
   const handleClick = () => {
+    if (loading) return;
+
     if (flow) {
+      setLoading(true);
       updateIds(flow.data!);
-      addFlow({ flow }).then((id) => {
-        navigate(`/flow/${id}/folder/${folderIdUrl}`);
-      });
+      addFlow({ flow })
+        .then((id) => {
+          navigate(`/flow/${id}/folder/${folderIdUrl}`);
+        })
+        .finally(() => {
+          setLoading(false);
+        });
+
       track("New Flow Created", { template: `${flow.name} Template` });
     } else {
       console.error(`Flow template not found`);

src/frontend/src/modals/templatesModal/index.tsx

@@ -18,6 +18,7 @@ export default function TemplatesModal({
   setOpen,
 }: newFlowModalPropsType): JSX.Element {
   const [currentTab, setCurrentTab] = useState("get-started");
+  const [loading, setLoading] = useState(false);
   const addFlow = useAddFlow();
   const navigate = useCustomNavigate();
   const { folderId } = useParams();
@@ -86,11 +87,17 @@ export default function TemplatesModal({
                   </div>
                   <Button
                     onClick={() => {
-                      addFlow().then((id) => {
-                        navigate(
-                          `/flow/${id}${folderId ? `/folder/${folderId}` : ""}`,
-                        );
-                      });
+                      if (loading) return;
+                      setLoading(true);
+                      addFlow()
+                        .then((id) => {
+                          navigate(
+                            `/flow/${id}${folderId ? `/folder/${folderId}` : ""}`,
+                          );
+                        })
+                        .finally(() => {
+                          setLoading(false);
+                        });
                       track("New Flow Created", { template: "Blank Flow" });
                     }}
                     size="sm"