fix loading

apps/saladeaula.digital/app/routes/settings/emails/primary.tsx

@@ -22,6 +22,7 @@ import type { User } from '@repo/ui/routes/users/data'
 
 import type { Email } from './data'
 import { type Schema, formSchema } from './add'
+import { Spinner } from '@repo/ui/components/ui/spinner'
 
 export function Primary({ items = [] }: { items: Email[] }) {
   const emails = items.map((props) => {
@@ -59,7 +60,7 @@ export function Primary({ items = [] }: { items: Email[] }) {
     { manual: true }
   )
 
-  const { handleSubmit, register } = useForm({
+  const { handleSubmit, register, formState } = useForm({
     resolver: zodResolver(formSchema)
   })
 
@@ -83,7 +84,8 @@ export function Primary({ items = [] }: { items: Email[] }) {
         </CardDescription>
       </CardHeader>
       <CardContent>
-        <form onSubmit={handleSubmit(onSubmit)} className="flex gap-1.5">
+        <form onSubmit={handleSubmit(onSubmit)}>
+          <fieldset disabled={formState.isSubmitting} className="flex gap-1.5">
             <NativeSelect defaultValue={primary?.email} {...register('email')}>
               {emails.map(({ email }) => {
                 return (
@@ -93,9 +95,18 @@ export function Primary({ items = [] }: { items: Email[] }) {
                 )
               })}
             </NativeSelect>
-          <Button type="submit" className="overflow-hidden cursor-pointer">
+            <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>
       </CardContent>
     </Card>

apps/saladeaula.digital/app/routes/settings/layout.tsx

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