Skip to main content
Docs

<ClerkLoading>

The <ClerkLoading> renders its children while Clerk is loading, and is helpful for showing a custom loading state.

Example

It's not recommended to wrap the entire app in the <ClerkLoading> component; instead, only wrap the components that need access to the Clerk object.

Note

Unlike other Clerk components for Astro, ClerkLoading must be imported from @clerk/astro/react. This requires that your Astro app is set up with React. See Use Clerk with Astro and React for guidance.

index.astro
---
import { ClerkLoading, ClerkLoaded } from '@clerk/astro/react'
---

<ClerkLoading client:load>
  <p>Clerk is loading</p>
</ClerkLoading>
<ClerkLoaded client:load>
  <p>Clerk has loaded</p>
</ClerkLoaded>

Feedback

What did you think of this content?
Edit this page on GitHub

Last updated on