♻️ refactor

src/app/[orgId]/settings/resources/proxy/create/page.tsx

@@ -89,7 +89,13 @@ import { useTranslations } from "next-intl";
 import Link from "next/link";
 import { useParams, useRouter } from "next/navigation";
 import { toASCII } from "punycode";
-import { useEffect, useMemo, useState, useCallback } from "react";
+import {
+    useMemo,
+    useState,
+    useCallback,
+    useTransition,
+    useEffect
+} from "react";
 import { Controller, useForm } from "react-hook-form";
 import { z } from "zod";
 
@@ -210,7 +216,7 @@ export default function Page() {
         orgQueries.sites({ orgId: orgId as string })
     );
 
-    const [createLoading, setCreateLoading] = useState(false);
+    const [createLoading, startTransition] = useTransition();
     const [showSnippets, setShowSnippets] = useState(false);
     const [niceId, setNiceId] = useState<string>("");
 
@@ -293,7 +299,10 @@ export default function Page() {
                   {
                       id: "raw" as ResourceType,
                       title: t("resourceRaw"),
-                      description: build == "saas" ? t("resourceRawDescriptionCloud") : t("resourceRawDescription")
+                      description:
+                          build == "saas"
+                              ? t("resourceRawDescriptionCloud")
+                              : t("resourceRawDescription")
                   }
               ])
     ];
@@ -432,8 +441,6 @@ export default function Page() {
     );
 
     async function onSubmit() {
-        setCreateLoading(true);
-
         const baseData = baseForm.getValues();
         const isHttp = baseData.http;
 
@@ -562,8 +569,6 @@ export default function Page() {
                 description: t("resourceErrorCreateMessageDescription")
             });
         }
-
-        setCreateLoading(false);
     }
 
     useEffect(() => {
@@ -1394,7 +1399,7 @@ export default function Page() {
                                         console.log(httpForm.getValues());
 
                                         if (baseValid && settingsValid) {
-                                            onSubmit();
+                                            startTransition(onSubmit);
                                         }
                                     }}
                                     loading={createLoading}

src/components/ProxyResourcesTable.tsx

@@ -174,22 +174,17 @@ export default function ProxyResourcesTable({
         });
     };
 
-    const deleteResource = (resourceId: number) => {
+    const deleteResource = async (resourceId: number) => {
-        api.delete(`/resource/${resourceId}`)
+        await api.delete(`/resource/${resourceId}`).catch((e) => {
-            .catch((e) => {
             console.error(t("resourceErrorDelte"), e);
             toast({
                 variant: "destructive",
                 title: t("resourceErrorDelte"),
                 description: formatAxiosError(e, t("resourceErrorDelte"))
             });
-            })
+        });
-            .then(() => {
-                startTransition(() => {
         router.refresh();
         setIsDeleteModalOpen(false);
-                });
-            });
     };
 
     async function toggleResourceEnabled(val: boolean, resourceId: number) {
@@ -626,7 +621,11 @@ export default function ProxyResourcesTable({
                         </div>
                     }
                     buttonText={t("resourceDeleteConfirm")}
-                    onConfirm={async () => deleteResource(selectedResource!.id)}
+                    onConfirm={async () =>
+                        startTransition(() =>
+                            deleteResource(selectedResource!.id)
+                        )
+                    }
                     string={selectedResource.name}
                     title={t("resourceDelete")}
                 />