<Loading />

The Loading component renders its default slot while the authentication state is being determined. It checks the current authentication state and displays a loading indicator or custom content during the initial authentication check, while rendering an optional #fallback slot (or nothing by default) once authentication is complete. This makes it ideal for providing user feedback during the initial app load or authentication verification.

Usage

You can use the Loading component to wrap any content that should be visible during authentication state checks.

Basic Usage

Use Loading to show content while authentication is being verified.

src/App.vue

<script setup>
import { Loading } from '@thunderid/vue'
</script>

<template>
  <Loading>
    <div>Checking authentication...</div>
  </Loading>
</template>

note

Once the authentication state is determined, nothing will be rendered unless you provide a #fallback slot.

With Fallback

Show your main application content once loading is complete using the #fallback slot:

src/App.vue

<script setup>
import { Loading, SignedIn, SignedOut } from '@thunderid/vue'
import Dashboard from './components/Dashboard.vue'
import LandingPage from './components/LandingPage.vue'
</script>

<template>
  <Loading>
    <div>Checking authentication...</div>
    <template #fallback>
      <SignedIn>
        <Dashboard />
      </SignedIn>
      <SignedOut>
        <LandingPage />
      </SignedOut>
    </template>
  </Loading>
</template>

Slots

Slot	Description
default	Content to render during authentication loading
fallback	Content to render once authentication is determined