Skip to main content
Docs
Dashboard

<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.

app/page.tsx
import { ClerkLoaded, ClerkLoading } from '@clerk/nextjs'

declare global {
  interface Window {
    Clerk: any
  }
}

export default function Page() {
  return (
    <>
      <ClerkLoading>
        <p>Clerk is loading...</p>
      </ClerkLoading>
      <ClerkLoaded>
        <p>Clerk has loaded</p>
      </ClerkLoaded>
    </>
  )
}
pages/index.tsx
import { ClerkLoaded, ClerkLoading } from '@clerk/nextjs'

declare global {
  interface Window {
    Clerk: any
  }
}

export default function Page() {
  return (
    <>
      <ClerkLoading>
        <p>Clerk is loading</p>
      </ClerkLoading>
      <ClerkLoaded>
        <p>Clerk has loaded</p>
      </ClerkLoaded>
    </>
  )
}
example.tsx
import { ClerkLoaded, ClerkLoading } from '@clerk/clerk-react'

declare global {
  interface Window {
    Clerk: any
  }
}

export default function Example() {
  return (
    <>
      <ClerkLoading>
        <p>Clerk is loading</p>
      </ClerkLoading>
      <ClerkLoaded>
        <p>Clerk has loaded</p>
      </ClerkLoaded>
    </>
  )
}
routes/index.tsx
import { ClerkLoading, ClerkLoaded } from '@clerk/remix'

declare global {
  interface Window {
    Clerk: any
  }
}

export default function Index() {
  return (
    <>
      <ClerkLoading>
        <p>Clerk is loading</p>
      </ClerkLoading>
      <ClerkLoaded>
        <p>Clerk has loaded</p>
      </ClerkLoaded>
    </>
  )
}
app/index.tsx
import { ClerkLoading, ClerkLoaded } from '@clerk/clerk-expo'
import { Text, View } from 'react-native'

declare global {
  interface Window {
    Clerk: any
  }
}

export default function Screen() {
  return (
    <View>
      <ClerkLoading>
        <Text>Clerk is loading</Text>
      </ClerkLoading>
      <ClerkLoaded>
        <Text>Clerk has loaded</Text>
      </ClerkLoaded>
    </View>
  )
}

Feedback

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

Last updated on