<ClerkLoading>

Renders while Clerk is loading.

Overview

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

This component only renders during client-side rendering (CSR only).

Usage

Make sure you've followed the installation guide for Clerk React before running the snippets below.

1
import { useEffect } from "react";
2
import { ClerkLoaded, ClerkLoading, ClerkProvider } from "@clerk/clerk-react";
3

4
function App() {
5
  return (
6
    <ClerkProvider publishableKey="clerk-pub-key">
7
      <ClerkLoading>
8
        <div>Clerk is loading...</div>
9
      </ClerkLoading>
10
      <ClerkLoaded>
11
        <Page/>
12
      </ClerkLoaded>
13
      <div>This div is always visible</div>
14
    </ClerkProvider>
15
  );
16
}
17

18
function Page() {
19
  return (
20
    <div>The content</div>
21
  );
22
}

Props

This component accepts no props, apart from any child components that will render while Clerk is loading.

Name	Type	Description
children	JSX.Element	Pass any component or components to render while Clerk is loading.