<ClerkLoading>

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

Usage

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.

---
import { ClerkLoading, ClerkLoaded } from '@clerk/astro/components'
---

<ClerkLoading>
  <Text>Clerk is loading</Text>
</ClerkLoading>
<ClerkLoaded>
  <Text>Clerk has loaded</Text>
</ClerkLoaded>