Clerk logo

Clerk Docs

Ctrl + K
Go to clerk.devGet API keys

<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 frontendApi="clerk.[your-domain].com">
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.

NameTypeDescription
childrenJSX.Element

Pass any component or components to render while Clerk is loading.

Was this helpful?

Clerk © 2022