Skip to Content
Clerk logo

Clerk Docs

Ctrl + K
Go to

<ClerkLoading />

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


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 November 21, 2023

What did you think of this content?

Clerk © 2023