`<ClerkLoading />`

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

Usage

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="pk_test_.........................">
      <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>
  );
}

Last updated on November 21, 2023