fix(react): notify status listener on subscribe so ClerkLoading resolves after remount

.changeset/clerk-loading-remount-status.md

@@ -0,0 +1,5 @@
+---
+'@clerk/react': patch
+---
+
+Fix `<ClerkLoading>` staying rendered and `<ClerkLoaded>` never rendering when a `<ClerkProvider>` remounts after Clerk has already loaded, for example after navigating away from and back to a layout that contains it.

packages/react/src/contexts/ClerkProvider.tsx

@@ -71,7 +71,7 @@ const useLoadedIsomorphicClerk = (mergedOptions: IsomorphicClerkOptions) => {
   }, [mergedOptions.localization]);
 
   React.useEffect(() => {
-    isomorphicClerkRef.current.on('status', setClerkStatus);
+    isomorphicClerkRef.current.on('status', setClerkStatus, { notify: true });
     return () => {
       if (isomorphicClerkRef.current) {
         isomorphicClerkRef.current.off('status', setClerkStatus);

packages/react/src/contexts/__tests__/ClerkProvider.status.test.tsx

@@ -0,0 +1,38 @@
+import { render } from '@testing-library/react';
+import React from 'react';
+import { describe, expect, it, vi } from 'vitest';
+
+import { IsomorphicClerk } from '../../isomorphicClerk';
+import { ClerkProvider } from '../ClerkProvider';
+
+vi.mock('../../isomorphicClerk', () => {
+  let instance: any;
+  class IsomorphicClerk {
+    status = 'loading';
+    on = vi.fn();
+    off = vi.fn();
+    __internal_updateProps = vi.fn().mockResolvedValue(undefined);
+    static getOrCreateInstance() {
+      instance ??= new IsomorphicClerk();
+      return instance;
+    }
+    static clearInstance() {
+      instance = undefined;
+    }
+  }
+  return { IsomorphicClerk };
+});
+
+describe('ClerkProvider status subscription', () => {
+  it('subscribes with notify so a remount receives the current status', () => {
+    const { unmount } = render(
+      <ClerkProvider publishableKey='pk_test_Y2xlcmsuY2xlcmsuZGV2JA'>
+        <div />
+      </ClerkProvider>,
+    );
+    const instance = IsomorphicClerk.getOrCreateInstance({} as any) as any;
+
+    expect(instance.on).toHaveBeenCalledWith('status', expect.any(Function), { notify: true });
+    unmount();
+  });
+});