<Loading />

The Loading component renders its children 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 optional fallback content (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.jsx

import { Loading } from '@asgardeo/react'

function App() {
  return (
    <Loading>
      <div>Checking authentication...</div>
    </Loading>
  )
}

export default App

note

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

With Fallback

Show your main application content once loading is complete:

src/App.jsx

import { Loading, SignedIn, SignedOut } from '@asgardeo/react'

function App() {
  return (
    <Loading
      fallback={
        <>
          <SignedIn>
            <Dashboard />
          </SignedIn>
          <SignedOut>
            <LandingPage />
          </SignedOut>
        </>
      }
    >
      <div>Checking authentication...</div>
    </Loading>
  )
}

export default App

Props

Prop	Type	Required	Description
children	ReactNode	✅	Content to render during authentication loading
fallback	ReactNode	❌	Content to render once authentication is determined