<AuthLoading>

The <AuthLoading> component renders its children only during an authentication session loading. This provides an easy way for you to insert loading states or skeleton loaders into your UI, enhancing user experience during data fetching.

Usage

Wrap loading placeholders or loader components with <AuthLoading> to conditionally render them whenever authentication session data is being fetched.

import { AuthLoading } from "@daveyplate/better-auth-ui"
 
export default function LoadingExample() {
  return (
    <AuthLoading>
      <YourLoadingSkeleton />
    </AuthLoading>
  )
}

Example

Here's a complete example of using <AuthLoading> with loading skeletons and managing unauthenticated user sessions using the <RedirectToSignIn /> and <SignedIn> components.

import { AuthLoading, RedirectToSignIn, SignedIn } from "@daveyplate/better-auth-ui"
import { YourCustomSkeleton } from "@/components/your-custom-skeleton"
import { DashboardContent } from "@/components/dashboard-content"
 
export default function ProtectedPage() {
  return (
    <>
      <AuthLoading>
        <YourCustomSkeleton />
      </AuthLoading>
 
      <RedirectToSignIn />
 
      <SignedIn>
        <DashboardContent />
      </SignedIn>
    </>
  )
}

Explanation

• <AuthLoading> will render the loading skeleton (<YourCustomSkeleton />) while authentication or session data is initializing or fetching.
• <RedirectToSignIn> automatically pushes any unauthenticated users to the sign-in page, ensuring pages that require authentication are protected from unauthorized access.
• <SignedIn> ensures the enclosed content (<DashboardContent />) only displays for authenticated users.

This combined approach offers seamless handling of loading states, authentication redirection, and conditional rendering based on user authentication state, greatly improving the overall user experience.

Skeleton Loaders

In practice, your skeleton loader will likely be customized. Here's a basic example you can easily customize to fit your use-case:

import { Card, CardHeader, CardContent } from "@/components/ui/card"
import { Skeleton } from "@/components/ui/skeleton"
 
export function YourCustomSkeleton() {
  return (
    <Card className="w-full mx-auto max-w-md">
      <CardHeader>
        <Skeleton className="h-6 w-1/3" />
        <Skeleton className="h-4 w-1/2" />
      </CardHeader>
 
      <CardContent className="space-y-2">
        <Skeleton className="h-8 w-full" />
        <Skeleton className="h-8 w-full" />
        <Skeleton className="h-8 w-3/4" />
      </CardContent>
    </Card>
  )
}

This example skeleton provides placeholder components resembling the size and shape of loaded content, greatly reducing UI flicker and enhancing user-perceived loading performance.