feat: improve signin loading state

src/app/signin/_components/AuthenticationProviders.tsx

@@ -4,9 +4,10 @@ import { getProviders } from "next-auth/react";
 import { useEffect, useMemo, useState } from "react";
 import { SignInProviderButton } from "./SignInProviderButton";
 import { EmailProviderForm } from "./EmailProviderForm";
-import { Loader2 } from "lucide-react";
 import { Alert, AlertDescription, AlertTitle } from "~/components/ui/alert";
 import { FiAlertTriangle } from "react-icons/fi";
+import { Skeleton } from "~/components/ui/skeleton";
+import { OrSeparator } from "./OrSeparator";
 
 type GetProvidersState = "idle" | "loading" | "success" | "error";
 
@@ -53,7 +54,14 @@ export function AuthenticationProviders({
   }, [providers]);
 
   if (["loading", "idle"].includes(getProvidersState)) {
-    return <Loader2 className="mt-10 size-8 animate-spin" />;
+    return (
+      <div className="mt-5 flex w-full flex-col gap-5">
+        <Skeleton className="h-10 w-full" />
+        <OrSeparator />
+        <Skeleton className="h-10 w-full" />
+        <Skeleton className="h-10 w-full" />
+      </div>
+    );
   }
 
   if (getProvidersState === "error") {

src/app/signin/_components/EmailProviderForm.tsx

@@ -15,6 +15,7 @@ import {
   FormMessage,
 } from "~/components/ui/form";
 import { Input } from "~/components/ui/input";
+import { OrSeparator } from "./OrSeparator";
 
 const formSchema = z.object({
   email: z.string().email("Por favor, insira um e-mail válido"),
@@ -39,12 +40,7 @@ export function EmailProviderForm() {
         className="mt-5 flex flex-col gap-5"
         onSubmit={form.handleSubmit(onSubmit)}
       >
-        <div className="relative my-5">
-          <span className="absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 transform bg-white pb-1 text-lg tracking-widest text-neutral-500">
-            ou
-          </span>
-          <hr />
-        </div>
+        <OrSeparator />
         <FormField
           name="email"
           control={form.control}

src/app/signin/_components/OrSeparator.tsx

@@ -0,0 +1,10 @@
+export function OrSeparator() {
+  return (
+    <div className="relative my-5">
+      <span className="absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 transform bg-white pb-1 text-lg tracking-widest text-neutral-500">
+        ou
+      </span>
+      <hr />
+    </div>
+  );
+}

src/app/signin/page.tsx

@@ -1,18 +1,19 @@
+"use client";
 import { redirect } from "next/navigation";
-import { getServerAuthSession } from "~/server/auth";
 import Image from "next/image";
 import { Suspense } from "react";
 import { Loader2 } from "lucide-react";
 import { Alert, AlertDescription, AlertTitle } from "~/components/ui/alert";
 import { FiAlertTriangle } from "react-icons/fi";
 import { AuthenticationProviders } from "./_components/AuthenticationProviders";
+import { useSession } from "next-auth/react";
 
 type SignInPageProps = {
   searchParams: Record<string, string>;
 };
 
-export default async function SignInPage({ searchParams }: SignInPageProps) {
-  const session = await getServerAuthSession();
+export default function SignInPage({ searchParams }: SignInPageProps) {
+  const { data: session } = useSession();
 
   if (session) {
     redirect(searchParams.callbackUrl ?? "/");
@@ -41,7 +42,7 @@ export default async function SignInPage({ searchParams }: SignInPageProps) {
           </AlertDescription>
         </Alert>
       )}
-      <AuthenticationProviders />
+      <AuthenticationProviders callbackUrl={searchParams.callbackUrl} />
     </Suspense>
   );
 }