<ClerkLoading>
The <ClerkLoading> renders its children while Clerk is loading, and is helpful for showing a custom loading state.
Usage
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>
)
}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 MyAppimport { 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 Appimport { ClerkLoading } from '@clerk/remix'
export default function Index() {
return (
<div>
<ClerkLoading>
<div>Clerk is loading</div>
</ClerkLoading>
</div>
)
}import { ClerkLoading } from '@clerk/clerk-expo'
import { Text, View } from 'react-native'
export default function Screen() {
return (
<View>
<ClerkLoading>
<Text>Clerk is loading</Text>
</ClerkLoading>
</View>
)
}Feedback
Last updated on