diff --git a/docs/_partials/control-components-with-clerkfailed-clerkdegraded.mdx b/docs/_partials/control-components-with-clerkfailed-clerkdegraded.mdx new file mode 100644 index 0000000000..68016780d1 --- /dev/null +++ b/docs/_partials/control-components-with-clerkfailed-clerkdegraded.mdx @@ -0,0 +1,188 @@ + + + ```tsx {{ filename: 'app/page.tsx' }} + import { ClerkLoaded, ClerkLoading, ClerkDegraded, ClerkFailed } from '@clerk/nextjs' + + export default function Page() { + return ( + <> + +

Clerk is loading...

+ + +

Clerk has loaded (ready or degraded)

+ + +

Clerk is experiencing issues. Please try again later.

+ + + +

Something went wrong with Clerk. Please contact support.

+ + + ) + } + ``` + + ```tsx {{ filename: 'pages/index.tsx' }} + import { ClerkLoaded, ClerkLoading, ClerkDegraded, ClerkFailed } from '@clerk/nextjs' + + export default function Page() { + return ( + <> + +

Clerk is loading...

+ + +

Clerk has loaded (ready or degraded)

+ + +

Clerk is experiencing issues. Please try again later.

+ + + +

Something went wrong with Clerk. Please contact support.

+ + + ) + } + ``` + + + + + ```tsx {{ filename: 'src/App.tsx' }} + import { ClerkLoaded, ClerkLoading, ClerkDegraded, ClerkFailed } from '@clerk/clerk-react' + + export default function App() { + return ( + <> + +

Clerk is loading...

+ + +

Clerk has loaded (ready or degraded)

+ + +

Clerk is experiencing issues. Please try again later.

+ + + +

Something went wrong with Clerk. Please contact support.

+ + + ) + } + + export default App + ``` + + + + ```tsx {{ filename: 'app/routes/example.tsx' }} + import { ClerkLoading, ClerkLoaded, ClerkDegraded, ClerkFailed } from '@clerk/react-router' + + export default function Example() { + return ( + <> + +

Clerk is loading...

+ + +

Clerk has loaded (ready or degraded)

+ + +

Clerk is experiencing issues. Please try again later.

+ + + +

Something went wrong with Clerk. Please contact support.

+ + + ) + } + ``` + + + + ```jsx {{ filename: 'src/routes/home.tsx' }} + import { ClerkLoaded, ClerkLoading, ClerkDegraded, ClerkFailed } from '@clerk/chrome-extension' + + export default function Home() { + return ( + <> + +

Clerk is loading...

+ + +

Clerk has loaded (ready or degraded)

+ + +

Clerk is experiencing issues. Please try again later.

+ + + +

Something went wrong with Clerk. Please contact support.

+ + + ) + } + ``` + + + + ```tsx {{ filename: 'app/routes/_index.tsx' }} + import { ClerkLoading, ClerkLoaded, ClerkDegraded, ClerkFailed } from '@clerk/remix' + + export default function Index() { + return ( + <> + +

Clerk is loading...

+ + +

Clerk has loaded (ready or degraded)

+ + +

Clerk is experiencing issues. Please try again later.

+ + + +

Something went wrong with Clerk. Please contact support.

+ + + ) + } + ``` + + + + ```tsx {{ filename: 'app/routes/index.tsx' }} + import { ClerkLoading, ClerkLoaded, ClerkDegraded, ClerkFailed } from '@clerk/tanstack-react-start' + import { createFileRoute } from '@tanstack/react-router' + + export const Route = createFileRoute('/')({ + component: Home, + }) + + function Home() { + return ( + <> + +

Clerk is loading...

+ + +

Clerk has loaded (ready or degraded)

+ + +

Clerk is experiencing issues. Please try again later.

+ + + +

Something went wrong with Clerk. Please contact support.

+ + + ) + } + ``` + diff --git a/docs/manifest.json b/docs/manifest.json index 665b25aa2b..07ee84d5e0 100644 --- a/docs/manifest.json +++ b/docs/manifest.json @@ -3174,6 +3174,14 @@ "title": "``", "href": "/docs/reference/components/control/clerk-loading" }, + { + "title": "``", + "href": "/docs/reference/components/control/clerk-degraded" + }, + { + "title": "``", + "href": "/docs/reference/components/control/clerk-failed" + }, { "title": "``", "href": "/docs/reference/components/control/protect" diff --git a/docs/reference/components/control/clerk-degraded.mdx b/docs/reference/components/control/clerk-degraded.mdx new file mode 100644 index 0000000000..fb037b1a53 --- /dev/null +++ b/docs/reference/components/control/clerk-degraded.mdx @@ -0,0 +1,12 @@ +--- +title: '``' +description: The `` component indicates that Clerk is partially operational. +--- + +The `` component indicates that Clerk is partially operational. + +## Example + +It's not recommended to wrap the entire app in the `` component; instead, only wrap the components that need access to the `Clerk` object. + + diff --git a/docs/reference/components/control/clerk-failed.mdx b/docs/reference/components/control/clerk-failed.mdx new file mode 100644 index 0000000000..d6acb113f5 --- /dev/null +++ b/docs/reference/components/control/clerk-failed.mdx @@ -0,0 +1,12 @@ +--- +title: '``' +description: The `` component indicates that the Clerk object has failed to load. +--- + +The `` component indicates that the Clerk object has failed to load. This is useful for displaying an error message to the user. + +## Example + +It's not recommended to wrap the entire app in the `` component; instead, only wrap the components that need access to the `Clerk` object. + + diff --git a/docs/reference/components/control/clerk-loaded.mdx b/docs/reference/components/control/clerk-loaded.mdx index e78695ad49..0beda01cbc 100644 --- a/docs/reference/components/control/clerk-loaded.mdx +++ b/docs/reference/components/control/clerk-loaded.mdx @@ -4,7 +4,7 @@ description: The `` component guarantees that the Clerk object has sdk: astro, chrome-extension, expo, nextjs, nuxt, react, react-router, remix, tanstack-react-start, vue, js-frontend --- -The `` component guarantees that the Clerk object has loaded and will be available under `window.Clerk`. This allows you to wrap child components to access the `Clerk` object without the need to check it exists. +The `` component guarantees that the Clerk object has loaded (the `status` is `'ready'` or `'degraded'`) and will be available under `window.Clerk`. This allows you to wrap child components to access the `Clerk` object without the need to check it exists. ` component guarantees that the Clerk object has loaded and wi It's not recommended to wrap the entire app in the `` component; instead, only wrap the components that need access to the `Clerk` object. - - ```tsx {{ filename: 'app/page.tsx' }} - import { ClerkLoaded } from '@clerk/nextjs' - - export default function Page() { - return ( - -

Clerk has loaded

- - ) - } - ``` - - - - ```tsx {{ filename: 'src/App.tsx' }} - import { ClerkLoaded } from '@clerk/clerk-react' - - function App() { - return ( - -

Clerk has loaded

- - ) - } - - export default App - ``` - - - - ```tsx {{ filename: 'app/routes/example.tsx' }} - import { ClerkLoaded } from '@clerk/react-router' - - export default function Example() { - return ( - -

Clerk has loaded

- - ) - } - ``` - - - - ```jsx {{ filename: 'src/routes/home.tsx' }} - import { ClerkLoaded } from '@clerk/chrome-extension' - - export default function Home() { - return ( - -

Clerk has loaded

- - ) - } - ``` - - - - ```tsx {{ filename: 'app/routes/_index.tsx' }} - import { ClerkLoaded } from '@clerk/remix' - - export default function Index() { - return ( -
- -

Clerk has loaded

- -
- ) - } - ``` - + > [!NOTE] @@ -119,27 +47,6 @@ The `` component guarantees that the Clerk object has loaded and wi ``` - - ```tsx {{ filename: 'app/routes/index.tsx' }} - import { ClerkLoaded } from '@clerk/tanstack-react-start' - import { createFileRoute } from '@tanstack/react-router' - - export const Route = createFileRoute('/')({ - component: Home, - }) - - function Home() { - return ( -
- -

Clerk has loaded

- -
- ) - } - ``` - - ```vue {{ filename: 'App.vue' }}