feat(mosaic): show the Add passkey button pending while the passkey request runs

Author: austincalvelage

.changeset/passkey-add-pending.md

@@ -0,0 +1,2 @@
+---
+---

packages/mosaic/src/features/user-profile/user-profile-passkeys-section/__tests__/user-profile-passkeys-lifecycle.feature.test.tsx

@@ -82,6 +82,26 @@ describe('Passkey action errors', () => {
   });
 });
 
+describe('Adding a passkey', () => {
+  it('shows the Add button pending while the passkey request runs', async () => {
+    serveAccounts();
+    await renderWithClerk(<UserProfilePasskeysSection />);
+    const creation = holdRequests('post', '/v1/me/passkeys');
+    const user = userEvent.setup();
+
+    try {
+      await user.click(screen.getByRole('button', { name: 'Add passkey' }));
+      await waitFor(() => expect(creation.requests).toHaveLength(1));
+      expect(screen.getByRole('button', { name: 'Add passkey' })).toHaveAttribute('aria-busy', 'true');
+      await waitFor(() => expect(screen.getByRole('progressbar')).toBeVisible());
+    } finally {
+      creation.fail('form_param_invalid', 'Credential failed');
+    }
+    await waitFor(() => expect(screen.getByRole('button', { name: 'Add passkey' })).toBeEnabled());
+    await waitFor(() => expect(screen.queryByRole('progressbar')).toBeNull());
+  });
+});
+
 describe('Changing the active passkey account', () => {
   it('clears the previous account Add error after a user switch', async () => {
     serveAccounts();

packages/mosaic/src/features/user-profile/user-profile-passkeys-section/user-profile-passkeys-section.view.tsx

@@ -3,7 +3,7 @@ import type { Ref } from 'react';
 import type { ConfirmController } from '../../../blocks/confirm';
 import { Confirmation } from '../../../blocks/confirmation';
 import { ReverificationDialog } from '../../../blocks/reverification';
-import { Button } from '../../../components/button';
+import { SubmitButton } from '../../../components/button';
 import type { DialogFocusTarget } from '../../../components/dialog';
 import { Field } from '../../../components/field';
 import { Icon } from '../../../components/icon';
@@ -69,14 +69,15 @@ export function UserProfilePasskeysSectionView({
             </Section.Content>
             {onAdd ? (
               <Section.Actions>
-                <Button
+                <SubmitButton
                   ref={addButtonRef}
+                  type='button'
                   aria-label={m.addLabel}
                   color='neutral'
                   size='sm'
                   variant='outline'
+                  isPending={isAdding && !addReverification?.visible}
                   disabled={isAdding}
-                  aria-busy={isAdding}
                   onClick={onAdd}
                 >
                   <Icon
@@ -85,7 +86,7 @@ export function UserProfilePasskeysSectionView({
                     size='sm'
                   />
                   {m.add}
-                </Button>
+                </SubmitButton>
               </Section.Actions>
             ) : null}
           </Section.Header>