diff --git a/src/app/[orgId]/settings/resources/proxy/create/page.tsx b/src/app/[orgId]/settings/resources/proxy/create/page.tsx index ff51a311b..3374d71b4 100644 --- a/src/app/[orgId]/settings/resources/proxy/create/page.tsx +++ b/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(""); @@ -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} diff --git a/src/components/ProxyResourcesTable.tsx b/src/components/ProxyResourcesTable.tsx index 353eddb50..b3db7a750 100644 --- a/src/components/ProxyResourcesTable.tsx +++ b/src/components/ProxyResourcesTable.tsx @@ -174,22 +174,17 @@ export default function ProxyResourcesTable({ }); }; - const deleteResource = (resourceId: number) => { - api.delete(`/resource/${resourceId}`) - .catch((e) => { - console.error(t("resourceErrorDelte"), e); - toast({ - variant: "destructive", - title: t("resourceErrorDelte"), - description: formatAxiosError(e, t("resourceErrorDelte")) - }); - }) - .then(() => { - startTransition(() => { - router.refresh(); - setIsDeleteModalOpen(false); - }); + const deleteResource = async (resourceId: number) => { + await api.delete(`/resource/${resourceId}`).catch((e) => { + console.error(t("resourceErrorDelte"), e); + toast({ + variant: "destructive", + title: t("resourceErrorDelte"), + description: formatAxiosError(e, t("resourceErrorDelte")) }); + }); + router.refresh(); + setIsDeleteModalOpen(false); }; async function toggleResourceEnabled(val: boolean, resourceId: number) { @@ -626,7 +621,11 @@ export default function ProxyResourcesTable({ } buttonText={t("resourceDeleteConfirm")} - onConfirm={async () => deleteResource(selectedResource!.id)} + onConfirm={async () => + startTransition(() => + deleteResource(selectedResource!.id) + ) + } string={selectedResource.name} title={t("resourceDelete")} />