refactor(mosaic): simplify password loading

Author: austincalvelage

packages/mosaic/src/features/user-profile/__tests__/user-profile-password-loading.test.tsx

@@ -2,7 +2,6 @@ import type * as SharedReact from '@clerk/shared/react';
 import { ClerkInstanceContext } from '@clerk/shared/react';
 import type { LoadedClerk } from '@clerk/shared/types';
 import { render, screen } from '@testing-library/react';
-import userEvent from '@testing-library/user-event';
 import { expect, it, vi } from 'vitest';
 
 import { MosaicProvider } from '../../../MosaicProvider';
@@ -50,24 +49,19 @@ function tree() {
   return (
     <ClerkInstanceContext.Provider value={{ value: clerk as unknown as LoadedClerk }}>
       <MosaicProvider>
-        <UserProfilePasswordSection />
+        <UserProfilePasswordSection fallback={<div>Loading password section</div>} />
       </MosaicProvider>
     </ClerkInstanceContext.Provider>
   );
 }
 
-it('keeps the draft while session data briefly reloads', async () => {
+it('shows the fallback when session data starts loading after the section is ready', () => {
   isSessionLoaded = true;
   const { rerender } = render(tree());
-  const events = userEvent.setup();
-  await events.click(screen.getByRole('button', { name: 'Change password' }));
-  await events.type(screen.getByLabelText('New password'), 'new-password-123');
+  expect(screen.getByRole('button', { name: 'Change password' })).toBeInTheDocument();
 
   isSessionLoaded = false;
   rerender(tree());
-  expect(screen.getByLabelText('New password')).toHaveValue('new-password-123');
-
-  isSessionLoaded = true;
-  rerender(tree());
-  expect(screen.getByLabelText('New password')).toHaveValue('new-password-123');
+  expect(screen.getByText('Loading password section')).toBeInTheDocument();
+  expect(screen.queryByRole('button', { name: 'Change password' })).not.toBeInTheDocument();
 });

packages/mosaic/src/features/user-profile/user-profile-password-section/user-profile-password-section.tsx

@@ -1,5 +1,5 @@
 import type { ReactNode } from 'react';
-import { useCallback, useRef } from 'react';
+import { useCallback } from 'react';
 
 import { Button } from '../../../components/button';
 import type { FieldFeedback } from '../../../components/form';
@@ -20,12 +20,7 @@ export interface UserProfilePasswordSectionProps {
 }
 
 export function UserProfilePasswordSection({ fallback = null }: UserProfilePasswordSectionProps) {
-  const currentModel = useUserProfilePasswordModel();
-  const settledModel = useRef<UserProfilePasswordModel>(currentModel);
-  if (currentModel.status !== 'loading') {
-    settledModel.current = currentModel;
-  }
-  const model = currentModel.status === 'loading' ? settledModel.current : currentModel;
+  const model = useUserProfilePasswordModel();
   const m = useMessages('userProfilePasswordSection');
   if (model.status === 'loading') {
     return fallback;