<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
Clerk React
import { useEffect } from "react";
import { ClerkLoaded, ClerkLoading, ClerkProvider } from "@clerk/clerk-react";
function App() {
return (
<ClerkProvider frontendApi="clerk.[your-domain].com">
<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>
);
}

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.