║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║

---

title: '<ClerkLoading>' description: The <ClerkLoading> renders its children while Clerk is loading, and is helpful for showing a custom loading state. sdk: astro, chrome-extension, expo, nextjs, nuxt, react, react-router, remix, tanstack-react-start, vue

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

Example

It's not recommended to wrap the entire app in the <ClerkLoading> component; instead, only wrap the components that need access to the Clerk object.

<Include src="_partials/control-components-with-clerkdegraded" /> <If sdk="astro"> > [!NOTE] > Unlike other Clerk components for Astro, `ClerkLoading` must be imported from `@clerk/astro/react`. This requires that your Astro app is set up with React. See [Use Clerk with Astro and React](/docs/reference/astro/react) for guidance.

---
import { ClerkLoading, ClerkLoaded } from '@clerk/astro/react'
---

<ClerkLoading client:load>
  <p>Clerk is loading</p>
</ClerkLoading>
<ClerkLoaded client:load>
  <p>Clerk has loaded</p>
</ClerkLoaded>

</If> <If sdk="expo"> ```tsx {{ filename: 'app/index.tsx' }} import { ClerkLoading, ClerkLoaded } from '@clerk/clerk-expo' import { Text, View } from 'react-native'

export default function Screen() { return ( <View> <ClerkLoading> <Text>Clerk is loading</Text> </ClerkLoading> <ClerkLoaded> <Text>Clerk has loaded</Text> </ClerkLoaded> </View> ) }

</If>

<If sdk="vue">
```vue {{ filename: 'App.vue' }}
<script setup lang="ts">
import { ClerkLoading, ClerkLoaded } from '@clerk/vue'
</script>

<template>
  <ClerkLoading>
    <p>Clerk is loading</p>
  </ClerkLoading>
  <ClerkLoaded>
    <p>Clerk has loaded</p>
  </ClerkLoaded>
</template>

</If> <If sdk="nuxt"> ```vue {{ filename: 'App.vue' }} <script setup lang="ts"> // Components are automatically imported </script> <template> <ClerkLoading> <p>Clerk is loading</p> </ClerkLoading> <ClerkLoaded> <p>Clerk has loaded</p> </ClerkLoaded> </template> ``` </If>

║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║