@meith/web 0.25.0 → 0.25.1

package/src/components/account/credential-proof-form.tsx

@@ -2,13 +2,12 @@
 
 import { useActionState } from 'react'
 
-import { Input } from '@meith/ui'
-import { Button } from '@meith/ui/button'
+import { buttonVariants, Input } from '@meith/ui'
 
 import { EMPTY_STATE } from '@/server/auth-form-state'
 import { proveCredentialAction } from '@/server/credential-proof-actions'
 
-import { FormError } from '../auth/form-controls'
+import { FormError, PendingButton } from '../auth/form-controls'
 import { OtpField } from '../auth/otp-field'
 
 export interface CredentialProofCopy {
@@ -50,9 +49,9 @@ export function CredentialProofForm({
             <Input name="password" type="password" autoComplete="current-password" required />
           </label>
           <div>
-            <Button type="submit" variant="primary">
+            <PendingButton showWorking className={buttonVariants({ variant: 'primary' })}>
               {copy.passwordSubmit}
-            </Button>
+            </PendingButton>
           </div>
         </form>
       ) : null}
@@ -75,9 +74,9 @@ export function CredentialProofForm({
           />
           <p className="text-sm text-muted-foreground">{copy.codeConsumed}</p>
           <div>
-            <Button type="submit" variant="primary">
+            <PendingButton showWorking className={buttonVariants({ variant: 'primary' })}>
               {copy.codeSubmit}
-            </Button>
+            </PendingButton>
           </div>
         </form>
       ) : null}

package/src/components/account/logout-form.tsx

@@ -1,14 +1,16 @@
 import { logoutAction } from '@/server/auth-actions'
 
+import { PendingButton } from '../auth/form-controls'
+
 export function LogoutForm({ label }: { label: string }) {
   return (
     <form action={logoutAction}>
-      <button
-        type="submit"
+      <PendingButton
+        showWorking
         className="font-medium text-foreground hover:underline underline-offset-2"
       >
         {label}
-      </button>
+      </PendingButton>
     </form>
   )
 }

package/src/components/account/notification-forms.tsx

@@ -10,7 +10,7 @@ import {
   saveNotificationPreferencesAction,
 } from '@/server/notification-actions'
 
-import { FormError } from '../auth/form-controls'
+import { FormError, PendingButton } from '../auth/form-controls'
 import { type Copy, fromCopy } from '../shell/copy'
 
 const BUTTON =
@@ -32,9 +32,9 @@ export function MarkNotificationReadForm({
     <form action={action} className="contents">
       <input type="hidden" name="notificationId" value={notificationId} />
       <FormError message={state.error} />
-      <button type="submit" className={LINK_BUTTON}>
+      <PendingButton showWorking className={LINK_BUTTON}>
         {fromCopy(copy, 'accountForm.notifications.markRead')}
-      </button>
+      </PendingButton>
     </form>
   )
 }
@@ -47,9 +47,9 @@ export function MarkAllNotificationsReadForm({ unread, copy }: { unread: number;
   return (
     <form action={action}>
       <FormError message={state.error} />
-      <button type="submit" className={BUTTON}>
+      <PendingButton showWorking className={BUTTON}>
         {fromCopy(copy, 'accountForm.notifications.markAllRead')}
-      </button>
+      </PendingButton>
     </form>
   )
 }
@@ -149,9 +149,9 @@ export function NotificationPreferencesForm({
       </p>
 
       <div>
-        <button type="submit" className={BUTTON}>
+        <PendingButton showWorking className={BUTTON}>
           {fromCopy(copy, 'accountForm.notifications.submit')}
-        </button>
+        </PendingButton>
       </div>
     </form>
   )
@@ -193,9 +193,9 @@ export function AnnouncementsOptInForm({ optedIn, copy }: { optedIn: boolean; co
       </p>
 
       <div>
-        <button type="submit" className={BUTTON}>
+        <PendingButton showWorking className={BUTTON}>
           {fromCopy(copy, 'accountForm.announcements.submit')}
-        </button>
+        </PendingButton>
       </div>
     </form>
   )

package/src/components/account/relation-forms.tsx

@@ -5,7 +5,7 @@ import { useActionState } from 'react'
 import { EMPTY_STATE } from '@/server/auth-form-state'
 import { removeRelationAction, setRelationAction } from '@/server/relation-actions'
 
-import { FormError } from '../auth/form-controls'
+import { FormError, PendingButton } from '../auth/form-controls'
 
 const LINK_BUTTON =
   'text-sm font-medium text-foreground underline decoration-border underline-offset-2 hover:decoration-foreground focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring'
@@ -35,9 +35,9 @@ export function SetRelationForm({
       <input type="hidden" name="username" value={username} />
       <input type="hidden" name="kind" value={kind} />
       <input type="hidden" name="returnTo" value={returnTo} />
-      <button type="submit" className={kind === 'buddy' ? LINK_BUTTON : QUIET_BUTTON}>
+      <PendingButton showWorking className={kind === 'buddy' ? LINK_BUTTON : QUIET_BUTTON}>
         {label}
-      </button>
+      </PendingButton>
     </form>
   )
 }
@@ -61,9 +61,9 @@ export function RemoveRelationForm({
       <input type="hidden" name="userId" value={userId} />
       <input type="hidden" name="username" value={username} />
       <input type="hidden" name="returnTo" value={returnTo} />
-      <button type="submit" className={QUIET_BUTTON}>
+      <PendingButton showWorking className={QUIET_BUTTON}>
         {label}
-      </button>
+      </PendingButton>
     </form>
   )
 }

package/src/components/account/reputation-forms.tsx

@@ -5,7 +5,7 @@ import { useActionState } from 'react'
 import { EMPTY_STATE } from '@/server/auth-form-state'
 import { rateMemberAction, withdrawRatingAction } from '@/server/reputation-actions'
 
-import { FormError } from '../auth/form-controls'
+import { FormError, PendingButton } from '../auth/form-controls'
 import { type Copy, fromCopy } from '../shell/copy'
 
 const FIELD =
@@ -72,20 +72,20 @@ export function RateMemberForm({
       </label>
 
       <div className="flex flex-wrap items-center gap-2">
-        <button type="submit" name="points" value="1" className={CHOICE}>
+        <PendingButton name="points" value="1" className={CHOICE}>
           {allowNegative
             ? fromCopy(copy, 'accountForm.rate.positive')
             : fromCopy(copy, 'accountForm.rate.thanks')}
-        </button>
-        <button type="submit" name="points" value="0" className={CHOICE}>
+        </PendingButton>
+        <PendingButton name="points" value="0" className={CHOICE}>
           {allowNegative
             ? fromCopy(copy, 'accountForm.rate.neutral')
             : fromCopy(copy, 'accountForm.rate.justComment')}
-        </button>
+        </PendingButton>
         {allowNegative && (
-          <button type="submit" name="points" value="-1" className={CHOICE}>
+          <PendingButton name="points" value="-1" className={CHOICE}>
             {fromCopy(copy, 'accountForm.rate.negative')}
-          </button>
+          </PendingButton>
         )}
       </div>
 
@@ -113,12 +113,12 @@ export function WithdrawRatingForm({
       <input type="hidden" name="ratingId" value={ratingId} />
       <input type="hidden" name="userId" value={userId} />
       <input type="hidden" name="returnTo" value={returnTo} />
-      <button
-        type="submit"
+      <PendingButton
+        showWorking
         className="text-xs text-muted-foreground hover:text-foreground focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring"
       >
         {fromCopy(copy, 'accountForm.rate.withdraw')}
-      </button>
+      </PendingButton>
     </form>
   )
 }

package/src/components/account/sign-in-methods.tsx

@@ -2,12 +2,12 @@
 
 import { useActionState } from 'react'
 
-import { Button } from '@meith/ui/button'
+import { buttonVariants } from '@meith/ui'
 
 import { EMPTY_STATE } from '@/server/auth-form-state'
 import { removePasskeyAction, unlinkIdentityAction } from '@/server/federation-actions'
 
-import { FormError } from '../auth/form-controls'
+import { FormError, PendingButton } from '../auth/form-controls'
 import { type Copy, fromCopy } from '../shell/copy'
 
 const CARD = 'flex flex-col gap-4 rounded-lg border border-border bg-card p-5'
@@ -79,9 +79,12 @@ export function LinkedSignIns({
               {manageable ? (
                 <form action={action}>
                   <input type="hidden" name="identityId" value={identity.id} />
-                  <Button type="submit" variant="destructive" size="sm">
+                  <PendingButton
+                    showWorking
+                    className={buttonVariants({ variant: 'destructive', size: 'sm' })}
+                  >
                     {fromCopy(copy, 'accountForm.linked.unlink')}
-                  </Button>
+                  </PendingButton>
                 </form>
               ) : null}
             </li>
@@ -150,9 +153,12 @@ export function PasskeyList({
               {manageable ? (
                 <form action={action}>
                   <input type="hidden" name="passkeyId" value={passkey.id} />
-                  <Button type="submit" variant="destructive" size="sm">
+                  <PendingButton
+                    showWorking
+                    className={buttonVariants({ variant: 'destructive', size: 'sm' })}
+                  >
                     {fromCopy(copy, 'accountForm.passkeys.remove')}
-                  </Button>
+                  </PendingButton>
                 </form>
               ) : null}
             </li>

package/src/components/account/subscription-forms.tsx

@@ -9,7 +9,7 @@ import {
   unsubscribeByTokenAction,
 } from '@/server/subscription-actions'
 
-import { FormError } from '../auth/form-controls'
+import { FormError, PendingButton } from '../auth/form-controls'
 import { type Copy, fromCopy } from '../shell/copy'
 
 const BUTTON =
@@ -77,11 +77,11 @@ export function FollowForm({
             </select>
           </label>
 
-          <button type="submit" className={QUIET_BUTTON}>
+          <PendingButton className={QUIET_BUTTON}>
             {mode === null
               ? fromCopy(copy, 'accountForm.follow.follow')
               : fromCopy(copy, 'accountForm.follow.save')}
-          </button>
+          </PendingButton>
         </form>
 
         {mode !== null && (
@@ -89,9 +89,9 @@ export function FollowForm({
             <input type="hidden" name="target" value={target} />
             <input type="hidden" name="targetId" value={targetId} />
             <input type="hidden" name="back" value={back} />
-            <button type="submit" className={GHOST_BUTTON}>
+            <PendingButton className={GHOST_BUTTON}>
               {fromCopy(copy, 'accountForm.follow.stop')}
-            </button>
+            </PendingButton>
           </form>
         )}
       </div>
@@ -142,9 +142,9 @@ export function UnsubscribeConfirmForm({
       <input type="hidden" name="token" value={token} />
       <p className="text-sm">{description}</p>
       <div>
-        <button type="submit" className={BUTTON}>
+        <PendingButton showWorking className={BUTTON}>
           {fromCopy(copy, 'accountForm.follow.unsubscribe')}
-        </button>
+        </PendingButton>
       </div>
     </form>
   )

package/src/components/account/two-factor-forms.tsx

@@ -2,7 +2,7 @@
 
 import { useActionState } from 'react'
 
-import { Button } from '@meith/ui/button'
+import { buttonVariants } from '@meith/ui'
 
 import { EMPTY_STATE, type FormState } from '@/server/auth-form-state'
 import {
@@ -14,7 +14,7 @@ import {
 } from '@/server/two-factor-actions'
 import { RECOVERY_CODES_FIELD } from '@/view/two-factor'
 
-import { Field, FormError } from '../auth/form-controls'
+import { Field, FormError, PendingButton } from '../auth/form-controls'
 import { OtpField, otpRecoveryFromCopy } from '../auth/otp-field'
 import { type Copy, fromCopy } from '../shell/copy'
 
@@ -103,17 +103,17 @@ export function TwoFactorSetup({
           hint={fromCopy(copy, 'accountForm.twoFactor.codeHint')}
         />
         <div className="flex flex-wrap gap-2">
-          <button type="submit" className={BUTTON}>
+          <PendingButton showWorking className={BUTTON}>
             {fromCopy(copy, 'accountForm.twoFactor.turnOn')}
-          </button>
+          </PendingButton>
         </div>
       </form>
 
       <form action={abandon}>
         <FormError message={abandonState.error} />
-        <Button type="submit" variant="ghost" size="sm">
+        <PendingButton showWorking className={buttonVariants({ variant: 'ghost', size: 'sm' })}>
           {fromCopy(copy, 'accountForm.twoFactor.cancel')}
-        </Button>
+        </PendingButton>
       </form>
     </section>
   )
@@ -148,9 +148,9 @@ export function TwoFactorPanel({
         </p>
         <FormError message={beginState.error} />
         <form action={begin}>
-          <button type="submit" className={BUTTON}>
+          <PendingButton showWorking className={BUTTON}>
             {fromCopy(copy, 'accountForm.twoFactor.begin')}
-          </button>
+          </PendingButton>
         </form>
       </section>
     )
@@ -199,9 +199,9 @@ export function TwoFactorPanel({
         </p>
         {proof('replace')}
         <div>
-          <button type="submit" className={BUTTON}>
+          <PendingButton showWorking className={BUTTON}>
             {fromCopy(copy, 'accountForm.twoFactor.replaceSubmit')}
-          </button>
+          </PendingButton>
         </div>
       </form>
 
@@ -215,9 +215,9 @@ export function TwoFactorPanel({
           <p className="text-sm font-medium">{fromCopy(copy, 'accountForm.twoFactor.offTitle')}</p>
           {proof('disable')}
           <div>
-            <Button type="submit" variant="destructive">
+            <PendingButton showWorking className={buttonVariants({ variant: 'destructive' })}>
               {fromCopy(copy, 'accountForm.twoFactor.offSubmit')}
-            </Button>
+            </PendingButton>
           </div>
         </form>
       )}

package/src/components/account/usercp-forms.tsx

@@ -12,7 +12,7 @@ import {
   saveSignatureAction,
 } from '@/server/usercp-actions'
 
-import { FormError } from '../auth/form-controls'
+import { FormError, PendingButton } from '../auth/form-controls'
 import { MarkdownEditor } from '../content/markdown-editor'
 import { CustomField, type CustomFieldInput } from '../profile/custom-field'
 import { type Copy, fromCopy } from '../shell/copy'
@@ -75,9 +75,9 @@ export function ProfileForm({
       ))}
 
       <div>
-        <button type="submit" className={BUTTON}>
+        <PendingButton showWorking className={BUTTON}>
           {fromCopy(copy, 'accountForm.profile.submit')}
-        </button>
+        </PendingButton>
       </div>
     </form>
   )
@@ -116,9 +116,9 @@ export function DisplayGroupForm({
       </label>
 
       <div>
-        <button type="submit" className={BUTTON}>
+        <PendingButton showWorking className={BUTTON}>
           {fromCopy(copy, 'accountForm.displayGroup.submit')}
-        </button>
+        </PendingButton>
       </div>
     </form>
   )
@@ -214,9 +214,9 @@ export function OptionsForm({
       </label>
 
       <div>
-        <button type="submit" className={BUTTON}>
+        <PendingButton showWorking className={BUTTON}>
           {fromCopy(copy, 'accountForm.options.submit')}
-        </button>
+        </PendingButton>
       </div>
     </form>
   )
@@ -270,9 +270,9 @@ export function PasswordForm({ minLength, copy }: { minLength: number; copy: Cop
       <p className="text-xs text-muted-foreground">{fromCopy(copy, 'accountForm.password.note')}</p>
 
       <div>
-        <button type="submit" className={BUTTON}>
+        <PendingButton showWorking className={BUTTON}>
           {fromCopy(copy, 'accountForm.password.submit')}
-        </button>
+        </PendingButton>
       </div>
     </form>
   )
@@ -313,9 +313,9 @@ export function EmailForm({ email, copy }: { email: string; copy: Copy }) {
       <p className="text-xs text-muted-foreground">{fromCopy(copy, 'accountForm.email.note')}</p>
 
       <div>
-        <button type="submit" className={BUTTON}>
+        <PendingButton showWorking className={BUTTON}>
           {fromCopy(copy, 'accountForm.email.submit')}
-        </button>
+        </PendingButton>
       </div>
     </form>
   )
@@ -378,9 +378,9 @@ export function SignatureForm({
       />
 
       <div>
-        <button type="submit" className={BUTTON}>
+        <PendingButton showWorking className={BUTTON}>
           {fromCopy(copy, 'accountForm.signature.submit')}
-        </button>
+        </PendingButton>
       </div>
     </form>
   )

package/src/components/admin/admin-forms.tsx

@@ -5,7 +5,7 @@ import { useActionState } from 'react'
 import { adminSignInAction, adminSignOutAction } from '@/server/admin-actions'
 import { EMPTY_STATE } from '@/server/auth-form-state'
 
-import { FormError } from '../auth/form-controls'
+import { FormError, PendingButton } from '../auth/form-controls'
 import { OtpField, otpRecoveryFromCopy } from '../auth/otp-field'
 import { type Copy, formatFromCopy, fromCopy } from '../shell/copy'
 
@@ -59,12 +59,12 @@ export function AdminSignInForm({
         recovery={otpRecoveryFromCopy(copy)}
       />
 
-      <button
-        type="submit"
+      <PendingButton
+        showWorking
         className="inline-flex h-10 items-center justify-center rounded-md bg-primary px-4 text-sm font-medium text-primary-foreground hover:opacity-90 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring"
       >
         {fromCopy(copy, 'adminPanel.enter')}
-      </button>
+      </PendingButton>
 
       <p className="text-xs text-muted-foreground">
         {formatFromCopy(copy, 'adminPanel.idleNote', { minutes: idleMinutes })}
@@ -76,12 +76,12 @@ export function AdminSignInForm({
 export function AdminSignOutForm({ copy }: { copy: Copy }) {
   return (
     <form action={adminSignOutAction}>
-      <button
-        type="submit"
+      <PendingButton
+        showWorking
         className="text-sm text-muted-foreground hover:text-foreground focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring"
       >
         {fromCopy(copy, 'adminPanel.leave')}
-      </button>
+      </PendingButton>
     </form>
   )
 }

package/src/components/admin/badge-forms.tsx

@@ -8,7 +8,7 @@ import { PANEL_CARD } from '@/components/shell/panel-list'
 import { EMPTY_STATE } from '@/server/auth-form-state'
 import { removeBadgeAction, saveBadgeAction } from '@/server/group-badge-actions'
 
-import { FormError, SubmitButton } from '../auth/form-controls'
+import { FormError, PendingButton, SubmitButton } from '../auth/form-controls'
 import { type Copy, formatFromCopy, fromCopy } from '../shell/copy'
 import { Saved } from './form-bits'
 
@@ -86,9 +86,9 @@ export function BadgeUploadForm({
         <form action={removeAction}>
           <input type="hidden" name="groupId" value={groupId} />
           <input type="hidden" name="scheme" value={scheme} />
-          <button type="submit" className={GHOST}>
+          <PendingButton showWorking className={GHOST}>
             {fromCopy(copy, 'admin.remove')}
-          </button>
+          </PendingButton>
         </form>
       )}
     </div>

package/src/components/admin/ban-filter-forms.tsx

@@ -5,7 +5,7 @@ import { useActionState } from 'react'
 import { EMPTY_STATE } from '@/server/auth-form-state'
 import { addBanFilterAction, removeBanFilterAction } from '@/server/ban-filter-admin-actions'
 
-import { FormError, SubmitButton } from '../auth/form-controls'
+import { FormError, PendingButton, SubmitButton } from '../auth/form-controls'
 import { type Copy, formatFromCopy, fromCopy } from '../shell/copy'
 import { INPUT, Saved } from './form-bits'
 
@@ -92,13 +92,13 @@ export function RemoveBanFilterForm({
     <form action={action} className="flex flex-col items-end gap-1">
       <FormError message={state.error} />
       <input type="hidden" name="id" value={id} />
-      <button
-        type="submit"
+      <PendingButton
+        showWorking
         className="text-xs text-destructive hover:underline"
         aria-label={formatFromCopy(copy, 'adminBanFilter.removeFilter', { pattern })}
       >
         {fromCopy(copy, 'admin.remove')}
-      </button>
+      </PendingButton>
     </form>
   )
 }

package/src/components/admin/branding-forms.tsx

@@ -6,7 +6,7 @@ import { PANEL_CARD } from '@/components/shell/panel-list'
 import { EMPTY_STATE } from '@/server/auth-form-state'
 import { removeLogoAction, saveLogoAction } from '@/server/branding-actions'
 
-import { FormError, SubmitButton } from '../auth/form-controls'
+import { FormError, PendingButton, SubmitButton } from '../auth/form-controls'
 import { type Copy, formatFromCopy, fromCopy } from '../shell/copy'
 import { Saved } from './form-bits'
 
@@ -87,9 +87,9 @@ export function LogoUploadForm({
       {slot.src !== null && (
         <form action={removeAction}>
           <input type="hidden" name="scheme" value={slot.scheme} />
-          <button type="submit" className={GHOST}>
+          <PendingButton showWorking className={GHOST}>
             {fromCopy(copy, 'admin.remove')}
-          </button>
+          </PendingButton>
         </form>
       )}
     </div>

package/src/components/admin/content-forms.tsx

@@ -24,7 +24,7 @@ import {
   updateWordFilterAction,
 } from '@/server/content-admin-actions'
 
-import { FormError, SubmitButton } from '../auth/form-controls'
+import { FormError, PendingButton, SubmitButton } from '../auth/form-controls'
 import { type Copy, fromCopy } from '../shell/copy'
 import { INPUT, Saved } from './form-bits'
 
@@ -87,9 +87,9 @@ export function WordFilterRowForm({ filter, copy }: { filter: WordFilterValues;
 
       <form action={removeAction}>
         <input type="hidden" name="id" value={filter.id} />
-        <button type="submit" className="text-xs text-muted-foreground hover:underline">
+        <PendingButton showWorking className="text-xs text-muted-foreground hover:underline">
           {fromCopy(copy, 'adminContent.filter.removeThis')}
-        </button>
+        </PendingButton>
       </form>
     </div>
   )
@@ -143,9 +143,9 @@ export function DeletePrefixForm({ prefix, copy }: { prefix: PrefixValues; copy:
     <form action={action} className="flex items-center gap-2">
       <FormError message={state.error} />
       <input type="hidden" name="id" value={prefix.id} />
-      <button type="submit" className="text-xs text-muted-foreground hover:underline">
+      <PendingButton showWorking className="text-xs text-muted-foreground hover:underline">
         {fromCopy(copy, 'admin.remove')}
-      </button>
+      </PendingButton>
     </form>
   )
 }
@@ -252,9 +252,9 @@ export function SmileyRowForm({ smiley, copy }: { smiley: SmileyValues; copy: Co
 
       <form action={removeAction}>
         <input type="hidden" name="id" value={smiley.id} />
-        <button type="submit" className="text-xs text-destructive hover:underline">
+        <PendingButton showWorking className="text-xs text-destructive hover:underline">
           {fromCopy(copy, 'admin.remove')}
-        </button>
+        </PendingButton>
       </form>
     </div>
   )
@@ -362,9 +362,9 @@ export function DirectiveRowForm({ directive, copy }: { directive: DirectiveValu
 
       <form action={removeAction}>
         <input type="hidden" name="id" value={directive.id} />
-        <button type="submit" className="text-xs text-destructive hover:underline">
+        <PendingButton showWorking className="text-xs text-destructive hover:underline">
           {fromCopy(copy, 'admin.remove')}
-        </button>
+        </PendingButton>
       </form>
     </div>
   )
@@ -422,9 +422,9 @@ export function DeleteAttachmentForm({ attachmentId, copy }: { attachmentId: num
     <form action={action} className="shrink-0">
       <FormError message={state.error} />
       <input type="hidden" name="id" value={attachmentId} />
-      <button type="submit" className="text-xs text-destructive hover:underline">
+      <PendingButton showWorking className="text-xs text-destructive hover:underline">
         {fromCopy(copy, 'adminContent.attachment.delete')}
-      </button>
+      </PendingButton>
     </form>
   )
 }
@@ -568,9 +568,9 @@ export function AnnouncementRowForm({
 
       <form action={removeAction}>
         <input type="hidden" name="id" value={announcement.id} />
-        <button type="submit" className="text-xs text-destructive hover:underline">
+        <PendingButton showWorking className="text-xs text-destructive hover:underline">
           {fromCopy(copy, 'admin.remove')}
-        </button>
+        </PendingButton>
       </form>
     </div>
   )
@@ -670,9 +670,9 @@ export function CaptchaQuestionRowForm({
 
       <form action={removeAction}>
         <input type="hidden" name="id" value={question.id} />
-        <button type="submit" className="text-xs text-destructive hover:underline">
+        <PendingButton showWorking className="text-xs text-destructive hover:underline">
           {fromCopy(copy, 'admin.remove')}
-        </button>
+        </PendingButton>
       </form>
     </div>
   )