<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>
)
}Feedback
Last updated on