<Loading />

The Loading component renders its default slot while the authentication state is being resolved. It is useful for showing skeleton screens or spinners during the initial hydration phase.

Usage

pages/index.vue

<template>
  <Loading>
    <p>Loading...</p>
  </Loading>

  <SignedIn>
    <p>Welcome back!</p>
  </SignedIn>

  <SignedOut>
    <SignInButton />
  </SignedOut>
</template>

note

On SSR-rendered pages, the auth state is available on first render and <Loading> content will typically not be visible. It is most relevant for pages that are only rendered client-side.

Slots

Slot	Description
default	Content rendered while isLoading is true