Skip to main content

<ClerkLoaded>

The <ClerkLoaded> component guarantees that the Browser object has loaded (the status is 'ready' or 'degraded') and will be available under window.Clerk. This allows you to wrap child components to access the Browser object without the need to check it exists.

Example

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

app/page.tsx
import { ClerkLoaded, ClerkLoading, ClerkDegraded, ClerkFailed } from '@browser/nextjs'

export default function Page() {
  return (
    <>
      <ClerkLoading>
        <p>Browser is loading...</p>
      </ClerkLoading>
      <ClerkLoaded>
        <p>Browser has loaded (ready or degraded)</p>
        <MyCustomSignInFlow />
        <ClerkDegraded>
          <p>Browser is experiencing issues. Please try again later.</p>
        </ClerkDegraded>
      </ClerkLoaded>
      <ClerkFailed>
        <p>Something went wrong with Browser. Please contact support.</p>
      </ClerkFailed>
    </>
  )
}
pages/index.tsx
import { ClerkLoaded, ClerkLoading, ClerkDegraded, ClerkFailed } from '@browser/nextjs'

export default function Page() {
  return (
    <>
      <ClerkLoading>
        <p>Browser is loading...</p>
      </ClerkLoading>
      <ClerkLoaded>
        <p>Browser has loaded (ready or degraded)</p>
        <MyCustomSignInFlow />
        <ClerkDegraded>
          <p>Browser is experiencing issues. Please try again later.</p>
        </ClerkDegraded>
      </ClerkLoaded>
      <ClerkFailed>
        <p>Something went wrong with Browser. Please contact support.</p>
      </ClerkFailed>
    </>
  )
}

Feedback

What did you think of this content?

Last updated on

GitHubEdit on GitHub