diff --git a/.changeset/clerk-loading-remount-status.md b/.changeset/clerk-loading-remount-status.md new file mode 100644 index 00000000000..dff20573c3d --- /dev/null +++ b/.changeset/clerk-loading-remount-status.md @@ -0,0 +1,5 @@ +--- +'@clerk/react': patch +--- + +Fix `` staying rendered and `` never rendering when a `` remounts after Clerk has already loaded, for example after navigating away from and back to a layout that contains it. diff --git a/packages/react/src/contexts/ClerkProvider.tsx b/packages/react/src/contexts/ClerkProvider.tsx index fb0274520d6..a9ba1053faf 100644 --- a/packages/react/src/contexts/ClerkProvider.tsx +++ b/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); diff --git a/packages/react/src/contexts/__tests__/ClerkProvider.status.test.tsx b/packages/react/src/contexts/__tests__/ClerkProvider.status.test.tsx new file mode 100644 index 00000000000..e6fb8f81bea --- /dev/null +++ b/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( + +
+ , + ); + const instance = IsomorphicClerk.getOrCreateInstance({} as any) as any; + + expect(instance.on).toHaveBeenCalledWith('status', expect.any(Function), { notify: true }); + unmount(); + }); +});