@clerk/react: with a preloaded Clerk instance, hooks are not loaded on the first render and <ClerkLoaded> never renders #10532

Related: #8569 (a preloaded instance passed to <ClerkProvider Clerk={clerk}> skips the UI load). We work around that by passing the UI at our own clerk.load({ ui: { ClerkUI } }). That leaves this gap.

Problem

With a preloaded instance passed as <ClerkProvider Clerk={clerk}>:

• On the first render, useAuth() returns isLoaded: false and useOrganization() has no membership, although the instance is already loaded. They become loaded one tick later, when the provider takes the instance over.
• <ClerkLoaded> does not re-render when that happens, so it cannot be used to wait for it.

A page that reads the role on its first render (for example, an admin-only route on a full page load) sees "not an admin" and redirects away.

Repro

@clerk/clerk-js 6.42, @clerk/react 6.18, @clerk/ui 1.42.

1. const clerk = new Clerk(pk); await clerk.load({ ui: { ClerkUI: ui.ClerkUI } }); before createRoot.
2. Render <ClerkProvider Clerk={clerk}><Probe /></ClerkProvider>.
3. In Probe, log useAuth().isLoaded: the first render logs false. Wrap Probe in <ClerkLoaded> and it never renders.

Proposal

With a loaded instance, the provider starts with isLoaded: true and the session, user and organization already set. Or <ClerkLoaded> re-renders when the provider becomes loaded.

Our workaround

One wrapper at the root renders the app only when useAuth().isLoaded is true.

(issue generated with AI assistance)