Skip to Content
You are viewing a beta version of Clerk Docs
Visit the latest docs
Clerk logo

Clerk Docs

Ctrl + K
Go to clerk.com

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

Last updated on April 11, 2024

What did you think of this content?

Clerk © 2024