<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/tanstack-react-start'
import { createFileRoute } from '@tanstack/react-router'
export const Route = createFileRoute('/')({
component: Home,
})
function Home() {
return (
<div>
<ClerkLoading>
<p>Clerk is loading</p>
</ClerkLoading>
<ClerkLoaded>
<p>Clerk has loaded</p>
</ClerkLoaded>
</div>
)
}Feedback
Last updated on