Don't reset submit button loading state right before nav (#3345)

Noticed while doing #3344. Form submit button loading state is true only
when the mutation `isPending`. But there's a brief moment after the
mutation completes but before the success nav happens where that's false
and the button is on screen. What that looks like is the button flipping
back to clickable right before the nav. That's stupid, so I gave every
button where it makes sense `loading={isPending || isSuccess}`. There's
some risk we could have a form where that is not appropriate (and there
are a couple already — see `createNic` on the instance networking tab)
but it's very easy for agents to get it right. I added a note to
AGENTS.md about it.

### Before


https://github.com/user-attachments/assets/fc4aadf6-7ba2-4e68-af01-be2a4dda5e2f

### After


https://github.com/user-attachments/assets/7dd7d2de-5f34-48be-821b-58e2bb8f767a

Author: david-crespo

AGENTS.md

@@ -5,6 +5,7 @@
 - Before starting a feature, skim an existing page or form with similar behavior and mirror the conventions—this codebase is intentionally conventional. Look for similar pages in `app/pages` and forms in `app/forms` to use as templates.
 - `@oxide/api` is at `app/api` and `@oxide/api-mocks` is at `mock-api/index.ts`.
 - The language server often has out of date errors. TypeScript 7 is extremely fast, so confirm errors that come from the language server by running `npm run tsc`
+- This repo uses oxfmt and oxlint, not prettier or eslint
 - Use Node.js 22+, then install deps and start the mock-backed dev server (skip if `npm run dev` is already running in another terminal):
 
   ```sh
@@ -49,6 +50,7 @@
 # Mutations & UI flow
 
 - Wrap writes in `useApiMutation`, use `confirmAction` to guard destructive intent, and surface results with `addToast`.
+- When a form's `onSuccess` always navigates away, pass `loading={mutation.isPending || mutation.isSuccess}` to the form shell. `isPending` alone flips false before the navigation unmounts the modal, so the button's spinner animates back out right before close. Skip `isSuccess` if the form can stay open and be reused after success, or if the mutation lives in a component that survives the modal (e.g., a tab page with `{open && <Modal/>}`) — there success closes the modal synchronously so `isPending` alone is glitch-free, and a sticky `isSuccess` would strand a spinner on next open.
 - Mutation error display depends on context. In forms, errors display inline via `submitError={mutation.error}` — do not add `onError` with a toast to the `useApiMutation` call. In `confirmAction`/`confirmDelete` flows, the confirm modal catches the error and shows a toast using `errorTitle` — do not also add `onError` on the mutation, or the user will see two toasts. For standalone actions (fire-and-forget `mutate` calls not wrapped in a confirm modal or form), use `onError` on the mutation to show an error toast.
 - Keep page scaffolding consistent: `PageHeader`, `PageTitle`, `DocsPopover`, `RefreshButton`, `PropertiesTable`, and `CardBlock` provide the expected layout for new system pages.
 - When a page should be discoverable from the command palette, extend `useQuickActions` with the new entry so it appears in the quick actions menu (see `app/pages/ProjectsPage.tsx:100-115`).

app/components/AttachEphemeralIpModal.tsx

@@ -85,7 +85,7 @@ export const AttachEphemeralIpModal = ({
       submitLabel="Attach"
       submitDisabled={submitDisabled}
       submitError={instanceEphemeralIpAttach.error}
-      loading={instanceEphemeralIpAttach.isPending}
+      loading={instanceEphemeralIpAttach.isPending || instanceEphemeralIpAttach.isSuccess}
       onSubmit={({ pool }) => {
         instanceEphemeralIpAttach.mutate({
           path: { instance },

app/components/AttachFloatingIpModal.tsx

@@ -91,7 +91,7 @@ export const AttachFloatingIpModal = ({
       onDismiss={onDismiss}
       submitLabel="Attach floating IP"
       submitError={floatingIpAttach.error}
-      loading={floatingIpAttach.isPending}
+      loading={floatingIpAttach.isPending || floatingIpAttach.isSuccess}
       title="Attach floating IP"
       onSubmit={() =>
         floatingIpAttach.mutate({

app/forms/anti-affinity-group-create.tsx

@@ -62,7 +62,7 @@ export default function CreateAntiAffinityGroupForm() {
           body: { ...values, failureDomain: 'sled' },
         })
       }
-      loading={createAntiAffinityGroup.isPending}
+      loading={createAntiAffinityGroup.isPending || createAntiAffinityGroup.isSuccess}
       submitError={createAntiAffinityGroup.error}
       submitLabel="Add group"
     >

app/forms/anti-affinity-group-edit.tsx

@@ -77,7 +77,7 @@ export default function EditAntiAffintyGroupForm() {
           body: values,
         })
       }}
-      loading={editAntiAffinityGroup.isPending}
+      loading={editAntiAffinityGroup.isPending || editAntiAffinityGroup.isSuccess}
       submitError={editAntiAffinityGroup.error}
       submitLabel="Edit group"
     >

app/forms/disk-create.tsx

@@ -191,7 +191,7 @@ export function CreateDiskSideModalForm({
           createDisk.mutate({ query: { project }, body })
         }
       }}
-      loading={createDisk.isPending}
+      loading={createDisk.isPending || createDisk.isSuccess}
       submitError={createDisk.error}
     >
       <NameField

app/forms/external-subnet-create.tsx

@@ -107,7 +107,7 @@ export default function CreateExternalSubnetSideModalForm() {
           body: { name, description, allocator },
         })
       }}
-      loading={createExternalSubnet.isPending}
+      loading={createExternalSubnet.isPending || createExternalSubnet.isSuccess}
       submitError={createExternalSubnet.error}
     >
       <NameField name="name" control={form.control} />

app/forms/external-subnet-edit.tsx

@@ -98,7 +98,7 @@ export default function EditExternalSubnetSideModalForm() {
           body: { name, description },
         })
       }}
-      loading={editExternalSubnet.isPending}
+      loading={editExternalSubnet.isPending || editExternalSubnet.isSuccess}
       submitError={editExternalSubnet.error}
     >
       <FormMetadata resource={subnet}>

app/forms/firewall-rules-create.tsx

@@ -122,7 +122,7 @@ export default function CreateFirewallRuleForm() {
           },
         })
       }}
-      loading={updateRules.isPending}
+      loading={updateRules.isPending || updateRules.isSuccess}
       submitError={updateRules.error}
       submitLabel="Add rule"
     >

app/forms/firewall-rules-edit.tsx

@@ -132,7 +132,7 @@ export default function EditFirewallRuleForm() {
       }
       // validationSchema={validationSchema}
       // validateOnBlur
-      loading={updateRules.isPending}
+      loading={updateRules.isPending || updateRules.isSuccess}
       submitError={updateRules.error}
     >
       <FormMetadata resource={originalRule} />