Docs

<ClerkLoading>

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

Usage

app/layout.tsx
import { ClerkProvider, ClerkLoaded, ClerkLoading } from '@clerk/nextjs'
import './globals.css'

export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <ClerkProvider>
      <html lang="en">
        <body>
          <ClerkLoading>
            <div>Clerk is loading...</div>
          </ClerkLoading>
          <ClerkLoaded>{children}</ClerkLoaded>
        </body>
      </html>
    </ClerkProvider>
  )
}
pages/_app.tsx
import '@/styles/globals.css'
import { ClerkLoaded, ClerkLoading, ClerkProvider } from '@clerk/nextjs'
import { AppProps } from 'next/app'

function MyApp({ Component, pageProps }: AppProps) {
  return (
    <ClerkProvider {...pageProps}>
      <ClerkLoading>
        <div>Clerk is loading</div>
      </ClerkLoading>
      <ClerkLoaded>
        <Component {...pageProps} />
      </ClerkLoaded>
    </ClerkProvider>
  )
}

export default MyApp
app.tsx
import { ClerkLoaded, ClerkLoading, ClerkProvider } from '@clerk/clerk-react'

function App() {
  return (
    <ClerkProvider publishableKey={`YOUR_PUBLISHABLE_KEY`}>
      <ClerkLoading>
        <div>Clerk is loading</div>
      </ClerkLoading>
      <ClerkLoaded>
        <Page />
      </ClerkLoaded>
      <div>This div is always visible</div>
    </ClerkProvider>
  )
}

function Page() {
  return <div>The content</div>
}

export default App
routes/index.tsx
import { ClerkLoading } from '@clerk/remix'

export default function Index() {
  return (
    <div>
      <ClerkLoading>
        <div>Clerk is loading</div>
      </ClerkLoading>
    </div>
  )
}

Feedback

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

Last updated on