calvin.erfmann/pangolin
1
0
Fork 0
mirror of https://github.com/fosrl/pangolin.git synced 2026-09-05 10:49:16 +02:00
Code Issues Packages Projects Releases Wiki Activity

Refactor form submissions to use startTransition for improved performance

Browse Source
This commit is contained in:
Owen
2026-09-04 17:15:20 -04:00
parent 44b0186044
commit 88770ff97b
11 changed files with 100 additions and 23 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/app/[orgId]/settings/access/users/create/page.tsx
+12 -4
View File
@@ -13,7 +13,12 @@ import { StrategyOption, StrategySelect } from "@app/components/StrategySelect";
import HeaderTitle from "@app/components/SettingsSectionTitle"; import HeaderTitle from "@app/components/SettingsSectionTitle";
import { Button } from "@app/components/ui/button"; import { Button } from "@app/components/ui/button";
import { useParams, useRouter } from "next/navigation"; import { useParams, useRouter } from "next/navigation";
import { useActionState, useRef, useState } from "react"; import {
useActionState,
useRef,
useState,
startTransition
} from "react";
import { import {
Form, Form,
FormControl, FormControl,
@@ -518,9 +523,12 @@ export default function Page() {
<SettingsSectionForm> <SettingsSectionForm>
<Form {...internalForm}> <Form {...internalForm}>
<form <form
action={ onSubmit={(e) => {
submitInternalAction e.preventDefault();
} startTransition(() => {
submitInternalAction();
});
}}
className="space-y-4" className="space-y-4"
id="create-user-form" id="create-user-form"
> >
src/app/[orgId]/settings/general/page.tsx
+12 -2
View File
@@ -3,7 +3,12 @@ import ConfirmDeleteDialog from "@app/components/ConfirmDeleteDialog";
import { Button } from "@app/components/ui/button"; import { Button } from "@app/components/ui/button";
import { useOrgContext } from "@app/hooks/useOrgContext"; import { useOrgContext } from "@app/hooks/useOrgContext";
import { toast } from "@app/hooks/useToast"; import { toast } from "@app/hooks/useToast";
import { useState, useTransition, useActionState } from "react"; import {
useState,
useTransition,
useActionState,
startTransition
} from "react";
import { import {
Form, Form,
FormControl, FormControl,
@@ -243,7 +248,12 @@ function GeneralSectionForm({ org }: SectionFormProps) {
<SettingsSectionForm> <SettingsSectionForm>
<Form {...form}> <Form {...form}>
<form <form
action={formAction} onSubmit={(e) => {
e.preventDefault();
startTransition(() => {
formAction();
});
}}
className="grid gap-4" className="grid gap-4"
id="org-general-settings-form" id="org-general-settings-form"
> >
src/app/[orgId]/settings/general/security/page.tsx
+13 -3
View File
@@ -3,7 +3,13 @@ import ConfirmDeleteDialog from "@app/components/ConfirmDeleteDialog";
import { Button } from "@app/components/ui/button"; import { Button } from "@app/components/ui/button";
import { useOrgContext } from "@app/hooks/useOrgContext"; import { useOrgContext } from "@app/hooks/useOrgContext";
import { toast } from "@app/hooks/useToast"; import { toast } from "@app/hooks/useToast";
import { useState, useRef, useActionState, type ComponentRef } from "react"; import {
useState,
useRef,
useActionState,
startTransition,
type ComponentRef
} from "react";
import { import {
Form, Form,
FormControl, FormControl,
@@ -207,7 +213,9 @@ function LogRetentionSectionForm({ org }: SectionFormProps) {
<form <form
onSubmit={(e) => { onSubmit={(e) => {
e.preventDefault(); e.preventDefault();
formAction(); startTransition(() => {
formAction();
});
}} }}
className="grid gap-4" className="grid gap-4"
id="org-log-retention-settings-form" id="org-log-retention-settings-form"
@@ -959,7 +967,9 @@ function SecuritySettingsSectionForm({ org }: SectionFormProps) {
<form <form
onSubmit={(e) => { onSubmit={(e) => {
e.preventDefault(); e.preventDefault();
formAction(); startTransition(() => {
formAction();
});
}} }}
ref={formRef} ref={formRef}
id="security-settings-section-form" id="security-settings-section-form"
src/app/[orgId]/settings/resources/private/[niceId]/ai-gateway/page.tsx
+7 -2
View File
@@ -41,7 +41,7 @@ import { zodResolver } from "@hookform/resolvers/zod";
import { useQuery, useQueryClient } from "@tanstack/react-query"; import { useQuery, useQueryClient } from "@tanstack/react-query";
import { useTranslations } from "next-intl"; import { useTranslations } from "next-intl";
import { useRouter } from "next/navigation"; import { useRouter } from "next/navigation";
import { useActionState, useEffect, useMemo } from "react"; import { useActionState, useEffect, useMemo, startTransition } from "react";
import { useForm } from "react-hook-form"; import { useForm } from "react-hook-form";
import { z } from "zod"; import { z } from "zod";
@@ -232,7 +232,12 @@ export default function PrivateResourceInferencePage() {
<SettingsSectionForm variant="half"> <SettingsSectionForm variant="half">
<Form {...form}> <Form {...form}>
<form <form
action={formAction} onSubmit={(e) => {
e.preventDefault();
startTransition(() => {
formAction();
});
}}
id="private-resource-providers-form" id="private-resource-providers-form"
> >
<SettingsFormGrid> <SettingsFormGrid>
src/app/[orgId]/settings/resources/private/[niceId]/general/page.tsx
+7 -2
View File
@@ -29,7 +29,7 @@ import { zodResolver } from "@hookform/resolvers/zod";
import { useTranslations } from "next-intl"; import { useTranslations } from "next-intl";
import Link from "next/link"; import Link from "next/link";
import { ExternalLink } from "lucide-react"; import { ExternalLink } from "lucide-react";
import { useActionState, useMemo } from "react"; import { useActionState, useMemo, startTransition } from "react";
import { useForm } from "react-hook-form"; import { useForm } from "react-hook-form";
import { z } from "zod"; import { z } from "zod";
import { useSaveSiteResource } from "@app/hooks/useSaveSiteResource"; import { useSaveSiteResource } from "@app/hooks/useSaveSiteResource";
@@ -97,7 +97,12 @@ export default function PrivateResourceGeneralPage() {
<SettingsSectionForm variant="half"> <SettingsSectionForm variant="half">
<Form {...form}> <Form {...form}>
<form <form
action={formAction} onSubmit={(e) => {
e.preventDefault();
startTransition(() => {
formAction();
});
}}
id="private-resource-general-form" id="private-resource-general-form"
> >
<SettingsFormGrid> <SettingsFormGrid>
src/app/[orgId]/settings/resources/public/[niceId]/general/page.tsx
+13 -2
View File
@@ -41,7 +41,13 @@ import { AxiosResponse } from "axios";
import { useTranslations } from "next-intl"; import { useTranslations } from "next-intl";
import { useParams, useRouter } from "next/navigation"; import { useParams, useRouter } from "next/navigation";
import { toASCII, toUnicode } from "punycode"; import { toASCII, toUnicode } from "punycode";
import { useActionState, useEffect, useMemo, useState } from "react"; import {
useActionState,
useEffect,
useMemo,
useState,
startTransition
} from "react";
import { useForm } from "react-hook-form"; import { useForm } from "react-hook-form";
import { zodResolver } from "@hookform/resolvers/zod"; import { zodResolver } from "@hookform/resolvers/zod";
import z from "zod"; import z from "zod";
@@ -282,7 +288,12 @@ export default function GeneralForm() {
<SettingsSectionForm variant="half"> <SettingsSectionForm variant="half">
<Form {...form}> <Form {...form}>
<form <form
action={formAction} onSubmit={(e) => {
e.preventDefault();
startTransition(() => {
formAction();
});
}}
id="general-settings-form" id="general-settings-form"
> >
<SettingsFormGrid> <SettingsFormGrid>
src/app/[orgId]/settings/resources/public/[niceId]/http/page.tsx
+10 -2
View File
@@ -41,7 +41,7 @@ import {
import { AxiosResponse } from "axios"; import { AxiosResponse } from "axios";
import { useTranslations } from "next-intl"; import { useTranslations } from "next-intl";
import { useParams, useRouter } from "next/navigation"; import { useParams, useRouter } from "next/navigation";
import { useActionState, useState } from "react"; import { useActionState, useState, startTransition } from "react";
import { useForm } from "react-hook-form"; import { useForm } from "react-hook-form";
import { z } from "zod"; import { z } from "zod";
@@ -209,7 +209,15 @@ function ProxyResourceHttpForm({
<SettingsSectionBody> <SettingsSectionBody>
<SettingsSectionForm variant="half"> <SettingsSectionForm variant="half">
<Form {...form}> <Form {...form}>
<form action={formAction} id="http-settings-form"> <form
onSubmit={(e) => {
e.preventDefault();
startTransition(() => {
formAction();
});
}}
id="http-settings-form"
>
<SettingsFormGrid> <SettingsFormGrid>
{!env.flags.usePangolinDns && ( {!env.flags.usePangolinDns && (
<SettingsFormCell span="full"> <SettingsFormCell span="full">
src/app/[orgId]/settings/resources/public/[niceId]/maintenance/page.tsx
+7 -2
View File
@@ -37,7 +37,7 @@ import { AxiosResponse } from "axios";
import { AlertCircle } from "lucide-react"; import { AlertCircle } from "lucide-react";
import { useTranslations } from "next-intl"; import { useTranslations } from "next-intl";
import { useParams, useRouter } from "next/navigation"; import { useParams, useRouter } from "next/navigation";
import { useActionState, useEffect } from "react"; import { useActionState, useEffect, startTransition } from "react";
import { useForm } from "react-hook-form"; import { useForm } from "react-hook-form";
import { zodResolver } from "@hookform/resolvers/zod"; import { zodResolver } from "@hookform/resolvers/zod";
import z from "zod"; import z from "zod";
@@ -203,7 +203,12 @@ export default function ResourceMaintenancePage() {
<SettingsSectionForm variant="half"> <SettingsSectionForm variant="half">
<Form {...maintenanceForm}> <Form {...maintenanceForm}>
<form <form
action={maintenanceFormAction} onSubmit={(e) => {
e.preventDefault();
startTransition(() => {
maintenanceFormAction();
});
}}
id="maintenance-settings-form" id="maintenance-settings-form"
> >
<SettingsFormGrid> <SettingsFormGrid>
src/app/[orgId]/settings/resources/public/[niceId]/tcp/page.tsx
+8 -2
View File
@@ -48,7 +48,8 @@ import { useRouter } from "next/navigation";
import { import {
use, use,
useActionState, useActionState,
useMemo useMemo,
startTransition
} from "react"; } from "react";
import { useForm } from "react-hook-form"; import { useForm } from "react-hook-form";
import { z } from "zod"; import { z } from "zod";
@@ -206,7 +207,12 @@ function ProxyResourceProtocolForm({
<SettingsSectionForm variant="half"> <SettingsSectionForm variant="half">
<Form {...proxySettingsForm}> <Form {...proxySettingsForm}>
<form <form
action={formAction} onSubmit={(e) => {
e.preventDefault();
startTransition(() => {
formAction();
});
}}
id="proxy-protocol-settings-form" id="proxy-protocol-settings-form"
> >
<SettingsFormGrid> <SettingsFormGrid>
src/components/OrgLabelForm.tsx
+2 -1
View File
@@ -62,7 +62,8 @@ export function OrgLabelForm({
<form <form
id="org-label-form" id="org-label-form"
className="flex flex-col gap-4 px-0.5" className="flex flex-col gap-4 px-0.5"
action={async () => { onSubmit={async (e) => {
e.preventDefault();
if (await form.trigger()) { if (await form.trigger()) {
onSubmit(form.getValues()); onSubmit(form.getValues());
} }
src/components/alert-rule-editor/AlertRuleGraphEditor.tsx
+9 -1
View File
@@ -211,7 +211,15 @@ export default function AlertRuleGraphEditor({
return ( return (
<Form {...form}> <Form {...form}>
<form id={FORM_ID} action={formAction}> <form
id={FORM_ID}
onSubmit={(e) => {
e.preventDefault();
startTransition(() => {
formAction();
});
}}
>
<SettingsContainer> <SettingsContainer>
<PaidFeaturesAlert tiers={tierMatrix.alertingRules} /> <PaidFeaturesAlert tiers={tierMatrix.alertingRules} />
<div className="flex flex-col lg:flex-row gap-6 lg:gap-8 items-start"> <div className="flex flex-col lg:flex-row gap-6 lg:gap-8 items-start">