Docs

You are viewing an archived version of the docs.Go to latest version

<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;
app.tsx
import { 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 App;
routes/index.tsx
import { ClerkLoading } from "@clerk/remix";

export default function Index() {
  return (
    <div>
      <ClerkLoading>
        <div>Clerk is loading</div>
      </ClerkLoading>
    </div>
  );
}

Feedback

What did you think of this content?

Last updated on