fix loading

This commit is contained in:
2025-11-30 20:24:26 -03:00
parent 9a0272af1d
commit 6e726601d2
2 changed files with 26 additions and 16 deletions

View File

@@ -22,6 +22,7 @@ import type { User } from '@repo/ui/routes/users/data'
import type { Email } from './data' import type { Email } from './data'
import { type Schema, formSchema } from './add' import { type Schema, formSchema } from './add'
import { Spinner } from '@repo/ui/components/ui/spinner'
export function Primary({ items = [] }: { items: Email[] }) { export function Primary({ items = [] }: { items: Email[] }) {
const emails = items.map((props) => { const emails = items.map((props) => {
@@ -59,7 +60,7 @@ export function Primary({ items = [] }: { items: Email[] }) {
{ manual: true } { manual: true }
) )
const { handleSubmit, register } = useForm({ const { handleSubmit, register, formState } = useForm({
resolver: zodResolver(formSchema) resolver: zodResolver(formSchema)
}) })
@@ -83,19 +84,29 @@ export function Primary({ items = [] }: { items: Email[] }) {
</CardDescription> </CardDescription>
</CardHeader> </CardHeader>
<CardContent> <CardContent>
<form onSubmit={handleSubmit(onSubmit)} className="flex gap-1.5"> <form onSubmit={handleSubmit(onSubmit)}>
<NativeSelect defaultValue={primary?.email} {...register('email')}> <fieldset disabled={formState.isSubmitting} className="flex gap-1.5">
{emails.map(({ email }) => { <NativeSelect defaultValue={primary?.email} {...register('email')}>
return ( {emails.map(({ email }) => {
<NativeSelectOption key={email} value={email}> return (
{email} <NativeSelectOption key={email} value={email}>
</NativeSelectOption> {email}
) </NativeSelectOption>
})} )
</NativeSelect> })}
<Button type="submit" className="overflow-hidden cursor-pointer"> </NativeSelect>
Alterar email <Button
</Button> type="submit"
className="overflow-hidden cursor-pointer relative"
>
{formState.isSubmitting && (
<div className="absolute inset-0 bg-lime-500 flex items-center justify-center">
<Spinner />
</div>
)}
Alterar email
</Button>
</fieldset>
</form> </form>
</CardContent> </CardContent>
</Card> </Card>

View File

@@ -38,8 +38,7 @@ export async function loader({ request, context }: Route.LoaderArgs) {
throw new Response(null, { status: r.status }) throw new Response(null, { status: r.status })
} }
const data = await r.json() return { data: await r.json() }
return { data }
} }
export function shouldRevalidate({}: ShouldRevalidateFunctionArgs) { export function shouldRevalidate({}: ShouldRevalidateFunctionArgs) {