Search…
<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.

Usage

Make sure you've followed the installation guide for Clerk React before running the snippets below.
Clerk React
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
}
Copied!

Props

This component accepts no props, apart from any child components that will render while Clerk is loading.
Name
Description
children
JSX.Element
Pass any component or components to render while Clerk is loading.
Last modified 3mo ago
Copy link
Edit on GitHub