app: manage mutation loading states with tanstack query (#18501)

2026-04-14 20:54:42 +00:00 · 2026-03-21 23:33:04 +08:00
parent 9ad6588f3e
commit 6a16db4b92
14 changed files with 453 additions and 432 deletions
--- a/packages/app/src/components/dialog-connect-provider.tsx
+++ b/packages/app/src/components/dialog-connect-provider.tsx
@@ -12,10 +12,9 @@ import { showToast } from "@opencode-ai/ui/toast"
 import { createMemo, Match, onCleanup, onMount, Switch } from "solid-js"
 import { createStore, produce } from "solid-js/store"
 import { Link } from "@/components/link"
-import { useLanguage } from "@/context/language"
 import { useGlobalSDK } from "@/context/global-sdk"
 import { useGlobalSync } from "@/context/global-sync"
-import { DialogSelectModel } from "./dialog-select-model"
+import { useLanguage } from "@/context/language"
 import { DialogSelectProvider } from "./dialog-select-provider"

 export function DialogConnectProvider(props: { provider: string }) {
--- a/packages/app/src/components/dialog-custom-provider-form.ts
+++ b/packages/app/src/components/dialog-custom-provider-form.ts
@@ -34,7 +34,6 @@ export type FormState = {
  apiKey: string
  models: ModelRow[]
  headers: HeaderRow[]
-  saving: boolean
  err: {
    providerID?: string
    name?: string
--- a/packages/app/src/components/dialog-custom-provider.test.ts
+++ b/packages/app/src/components/dialog-custom-provider.test.ts
@@ -16,7 +16,6 @@ describe("validateCustomProvider", () => {
          { row: "h0", key: " X-Test ", value: " enabled ", err: {} },
          { row: "h1", key: "", value: "", err: {} },
        ],
-        saving: false,
        err: {},
      },
      t,
@@ -60,7 +59,6 @@ describe("validateCustomProvider", () => {
          { row: "h0", key: "Authorization", value: "one", err: {} },
          { row: "h1", key: "authorization", value: "two", err: {} },
        ],
-        saving: false,
        err: {},
      },
      t,
--- a/packages/app/src/components/dialog-custom-provider.tsx
+++ b/packages/app/src/components/dialog-custom-provider.tsx
@@ -3,6 +3,7 @@ import { useDialog } from "@opencode-ai/ui/context/dialog"
 import { Dialog } from "@opencode-ai/ui/dialog"
 import { IconButton } from "@opencode-ai/ui/icon-button"
 import { ProviderIcon } from "@opencode-ai/ui/provider-icon"
+import { useMutation } from "@tanstack/solid-query"
 import { TextField } from "@opencode-ai/ui/text-field"
 import { showToast } from "@opencode-ai/ui/toast"
 import { batch, For } from "solid-js"
@@ -31,7 +32,6 @@ export function DialogCustomProvider(props: Props) {
    apiKey: "",
    models: [modelRow()],
    headers: [headerRow()],
-    saving: false,
    err: {},
  })

@@ -116,48 +116,49 @@ export function DialogCustomProvider(props: Props) {
    return output.result
  }

-  const save = async (e: SubmitEvent) => {
-    e.preventDefault()
-    if (form.saving) return
+  const saveMutation = useMutation(() => ({
+    mutationFn: async (result: NonNullable<ReturnType<typeof validate>>) => {
+      const disabledProviders = globalSync.data.config.disabled_providers ?? []
+      const nextDisabled = disabledProviders.filter((id) => id !== result.providerID)

-    const result = validate()
-    if (!result) return
-
-    setForm("saving", true)
-
-    const disabledProviders = globalSync.data.config.disabled_providers ?? []
-    const nextDisabled = disabledProviders.filter((id) => id !== result.providerID)
-
-    const auth = result.key
-      ? globalSDK.client.auth.set({
+      if (result.key) {
+        await globalSDK.client.auth.set({
          providerID: result.providerID,
          auth: {
            type: "api",
            key: result.key,
          },
        })
-      : Promise.resolve()
+      }

-    auth
-      .then(() =>
-        globalSync.updateConfig({ provider: { [result.providerID]: result.config }, disabled_providers: nextDisabled }),
-      )
-      .then(() => {
-        dialog.close()
-        showToast({
-          variant: "success",
-          icon: "circle-check",
-          title: language.t("provider.connect.toast.connected.title", { provider: result.name }),
-          description: language.t("provider.connect.toast.connected.description", { provider: result.name }),
-        })
+      await globalSync.updateConfig({
+        provider: { [result.providerID]: result.config },
+        disabled_providers: nextDisabled,
      })
-      .catch((err: unknown) => {
-        const message = err instanceof Error ? err.message : String(err)
-        showToast({ title: language.t("common.requestFailed"), description: message })
-      })
-      .finally(() => {
-        setForm("saving", false)
+      return result
+    },
+    onSuccess: (result) => {
+      dialog.close()
+      showToast({
+        variant: "success",
+        icon: "circle-check",
+        title: language.t("provider.connect.toast.connected.title", { provider: result.name }),
+        description: language.t("provider.connect.toast.connected.description", { provider: result.name }),
      })
+    },
+    onError: (err) => {
+      const message = err instanceof Error ? err.message : String(err)
+      showToast({ title: language.t("common.requestFailed"), description: message })
+    },
+  }))
+
+  const save = (e: SubmitEvent) => {
+    e.preventDefault()
+    if (saveMutation.isPending) return
+
+    const result = validate()
+    if (!result) return
+    saveMutation.mutate(result)
  }

  return (
@@ -312,8 +313,14 @@ export function DialogCustomProvider(props: Props) {
            </Button>
          </div>

-          <Button class="w-auto self-start" type="submit" size="large" variant="primary" disabled={form.saving}>
-            {form.saving ? language.t("common.saving") : language.t("common.submit")}
+          <Button
+            class="w-auto self-start"
+            type="submit"
+            size="large"
+            variant="primary"
+            disabled={saveMutation.isPending}
+          >
+            {saveMutation.isPending ? language.t("common.saving") : language.t("common.submit")}
          </Button>
        </form>
      </div>
--- a/packages/app/src/components/dialog-edit-project.tsx
+++ b/packages/app/src/components/dialog-edit-project.tsx
@@ -2,6 +2,7 @@ import { Button } from "@opencode-ai/ui/button"
 import { useDialog } from "@opencode-ai/ui/context/dialog"
 import { Dialog } from "@opencode-ai/ui/dialog"
 import { TextField } from "@opencode-ai/ui/text-field"
+import { useMutation } from "@tanstack/solid-query"
 import { Icon } from "@opencode-ai/ui/icon"
 import { createMemo, For, Show } from "solid-js"
 import { createStore } from "solid-js/store"
@@ -28,7 +29,6 @@ export function DialogEditProject(props: { project: LocalProject }) {
    color: props.project.icon?.color || "pink",
    iconUrl: props.project.icon?.override || "",
    startup: props.project.commands?.start ?? "",
-    saving: false,
    dragOver: false,
    iconHover: false,
  })
@@ -71,38 +71,37 @@ export function DialogEditProject(props: { project: LocalProject }) {
    setStore("iconUrl", "")
  }

-  async function handleSubmit(e: SubmitEvent) {
-    e.preventDefault()
+  const saveMutation = useMutation(() => ({
+    mutationFn: async () => {
+      const name = store.name.trim() === folderName() ? "" : store.name.trim()
+      const start = store.startup.trim()

-    await Promise.resolve()
-      .then(async () => {
-        setStore("saving", true)
-        const name = store.name.trim() === folderName() ? "" : store.name.trim()
-        const start = store.startup.trim()
-
-        if (props.project.id && props.project.id !== "global") {
-          await globalSDK.client.project.update({
-            projectID: props.project.id,
-            directory: props.project.worktree,
-            name,
-            icon: { color: store.color, override: store.iconUrl },
-            commands: { start },
-          })
-          globalSync.project.icon(props.project.worktree, store.iconUrl || undefined)
-          dialog.close()
-          return
-        }
-
-        globalSync.project.meta(props.project.worktree, {
+      if (props.project.id && props.project.id !== "global") {
+        await globalSDK.client.project.update({
+          projectID: props.project.id,
+          directory: props.project.worktree,
          name,
-          icon: { color: store.color, override: store.iconUrl || undefined },
-          commands: { start: start || undefined },
+          icon: { color: store.color, override: store.iconUrl },
+          commands: { start },
        })
+        globalSync.project.icon(props.project.worktree, store.iconUrl || undefined)
        dialog.close()
+        return
+      }
+
+      globalSync.project.meta(props.project.worktree, {
+        name,
+        icon: { color: store.color, override: store.iconUrl || undefined },
+        commands: { start: start || undefined },
      })
-      .finally(() => {
-        setStore("saving", false)
-      })
+      dialog.close()
+    },
+  }))
+
+  function handleSubmit(e: SubmitEvent) {
+    e.preventDefault()
+    if (saveMutation.isPending) return
+    saveMutation.mutate()
  }

  return (
@@ -246,8 +245,8 @@ export function DialogEditProject(props: { project: LocalProject }) {
          <Button type="button" variant="ghost" size="large" onClick={() => dialog.close()}>
            {language.t("common.cancel")}
          </Button>
-          <Button type="submit" variant="primary" size="large" disabled={store.saving}>
-            {store.saving ? language.t("common.saving") : language.t("common.save")}
+          <Button type="submit" variant="primary" size="large" disabled={saveMutation.isPending}>
+            {saveMutation.isPending ? language.t("common.saving") : language.t("common.save")}
          </Button>
        </div>
      </form>
--- a/packages/app/src/components/dialog-select-mcp.tsx
+++ b/packages/app/src/components/dialog-select-mcp.tsx
@@ -1,4 +1,5 @@
-import { Component, createMemo, createSignal, Show } from "solid-js"
+import { useMutation } from "@tanstack/solid-query"
+import { Component, createMemo, Show } from "solid-js"
 import { useSync } from "@/context/sync"
 import { useSDK } from "@/context/sdk"
 import { Dialog } from "@opencode-ai/ui/dialog"
@@ -17,7 +18,6 @@ export const DialogSelectMcp: Component = () => {
  const sync = useSync()
  const sdk = useSDK()
  const language = useLanguage()
-  const [loading, setLoading] = createSignal<string | null>(null)

  const items = createMemo(() =>
    Object.entries(sync.data.mcp ?? {})
@@ -25,10 +25,8 @@ export const DialogSelectMcp: Component = () => {
      .sort((a, b) => a.name.localeCompare(b.name)),
  )

-  const toggle = async (name: string) => {
-    if (loading()) return
-    setLoading(name)
-    try {
+  const toggle = useMutation(() => ({
+    mutationFn: async (name: string) => {
      const status = sync.data.mcp[name]
      if (status?.status === "connected") {
        await sdk.client.mcp.disconnect({ name })
@@ -38,10 +36,8 @@ export const DialogSelectMcp: Component = () => {

      const result = await sdk.client.mcp.status()
      if (result.data) sync.set("mcp", result.data)
-    } finally {
-      setLoading(null)
-    }
-  }
+    },
+  }))

  const enabledCount = createMemo(() => items().filter((i) => i.status === "connected").length)
  const totalCount = createMemo(() => items().length)
@@ -59,7 +55,8 @@ export const DialogSelectMcp: Component = () => {
        filterKeys={["name", "status"]}
        sortBy={(a, b) => a.name.localeCompare(b.name)}
        onSelect={(x) => {
-          if (x) toggle(x.name)
+          if (!x || toggle.isPending) return
+          toggle.mutate(x.name)
        }}
      >
        {(i) => {
@@ -83,7 +80,7 @@ export const DialogSelectMcp: Component = () => {
                  <Show when={statusLabel()}>
                    <span class="text-11-regular text-text-weaker">{statusLabel()}</span>
                  </Show>
-                  <Show when={loading() === i.name}>
+                  <Show when={toggle.isPending && toggle.variables === i.name}>
                    <span class="text-11-regular text-text-weak">{language.t("common.loading.ellipsis")}</span>
                  </Show>
                </div>
@@ -92,7 +89,14 @@ export const DialogSelectMcp: Component = () => {
                </Show>
              </div>
              <div onClick={(e) => e.stopPropagation()}>
-                <Switch checked={enabled()} disabled={loading() === i.name} onChange={() => toggle(i.name)} />
+                <Switch
+                  checked={enabled()}
+                  disabled={toggle.isPending && toggle.variables === i.name}
+                  onChange={() => {
+                    if (toggle.isPending) return
+                    toggle.mutate(i.name)
+                  }}
+                />
              </div>
            </div>
          )
--- a/packages/app/src/components/dialog-select-server.tsx
+++ b/packages/app/src/components/dialog-select-server.tsx
@@ -6,6 +6,7 @@ import { Icon } from "@opencode-ai/ui/icon"
 import { IconButton } from "@opencode-ai/ui/icon-button"
 import { List } from "@opencode-ai/ui/list"
 import { TextField } from "@opencode-ai/ui/text-field"
+import { useMutation } from "@tanstack/solid-query"
 import { showToast } from "@opencode-ai/ui/toast"
 import { useNavigate } from "@solidjs/router"
 import { createEffect, createMemo, createResource, onCleanup, Show } from "solid-js"
@@ -186,7 +187,6 @@ export function DialogSelectServer() {
      name: "",
      username: DEFAULT_USERNAME,
      password: "",
-      adding: false,
      error: "",
      showForm: false,
      status: undefined as boolean | undefined,
@@ -198,7 +198,6 @@ export function DialogSelectServer() {
      username: "",
      password: "",
      error: "",
-      busy: false,
      status: undefined as boolean | undefined,
    },
  })
@@ -209,7 +208,6 @@ export function DialogSelectServer() {
      name: "",
      username: DEFAULT_USERNAME,
      password: "",
-      adding: false,
      error: "",
      showForm: false,
      status: undefined,
@@ -224,10 +222,78 @@ export function DialogSelectServer() {
      password: "",
      error: "",
      status: undefined,
-      busy: false,
    })
  }

+  const addMutation = useMutation(() => ({
+    mutationFn: async (value: string) => {
+      const normalized = normalizeServerUrl(value)
+      if (!normalized) {
+        resetAdd()
+        return
+      }
+
+      const conn: ServerConnection.Http = {
+        type: "http",
+        http: { url: normalized },
+      }
+      if (store.addServer.name.trim()) conn.displayName = store.addServer.name.trim()
+      if (store.addServer.password) conn.http.password = store.addServer.password
+      if (store.addServer.password && store.addServer.username) conn.http.username = store.addServer.username
+      const result = await checkServerHealth(conn.http)
+      if (!result.healthy) {
+        setStore("addServer", { error: language.t("dialog.server.add.error") })
+        return
+      }
+
+      resetAdd()
+      await select(conn, true)
+    },
+  }))
+
+  const editMutation = useMutation(() => ({
+    mutationFn: async (input: { original: ServerConnection.Any; value: string }) => {
+      if (input.original.type !== "http") return
+      const normalized = normalizeServerUrl(input.value)
+      if (!normalized) {
+        resetEdit()
+        return
+      }
+
+      const name = store.editServer.name.trim() || undefined
+      const username = store.editServer.username || undefined
+      const password = store.editServer.password || undefined
+      const existingName = input.original.displayName
+      if (
+        normalized === input.original.http.url &&
+        name === existingName &&
+        username === input.original.http.username &&
+        password === input.original.http.password
+      ) {
+        resetEdit()
+        return
+      }
+
+      const conn: ServerConnection.Http = {
+        type: "http",
+        displayName: name,
+        http: { url: normalized, username, password },
+      }
+      const result = await checkServerHealth(conn.http)
+      if (!result.healthy) {
+        setStore("editServer", { error: language.t("dialog.server.add.error") })
+        return
+      }
+      if (normalized === input.original.http.url) {
+        server.add(conn)
+      } else {
+        replaceServer(input.original, conn)
+      }
+
+      resetEdit()
+    },
+  }))
+
  const replaceServer = (original: ServerConnection.Http, next: ServerConnection.Http) => {
    const active = server.key
    const newConn = server.add(next)
@@ -296,7 +362,7 @@ export function DialogSelectServer() {
  }

  const handleAddChange = (value: string) => {
-    if (store.addServer.adding) return
+    if (addMutation.isPending) return
    setStore("addServer", { url: value, error: "" })
    void previewStatus(value, store.addServer.username, store.addServer.password, (next) =>
      setStore("addServer", { status: next }),
@@ -304,12 +370,12 @@ export function DialogSelectServer() {
  }

  const handleAddNameChange = (value: string) => {
-    if (store.addServer.adding) return
+    if (addMutation.isPending) return
    setStore("addServer", { name: value, error: "" })
  }

  const handleAddUsernameChange = (value: string) => {
-    if (store.addServer.adding) return
+    if (addMutation.isPending) return
    setStore("addServer", { username: value, error: "" })
    void previewStatus(store.addServer.url, value, store.addServer.password, (next) =>
      setStore("addServer", { status: next }),
@@ -317,7 +383,7 @@ export function DialogSelectServer() {
  }

  const handleAddPasswordChange = (value: string) => {
-    if (store.addServer.adding) return
+    if (addMutation.isPending) return
    setStore("addServer", { password: value, error: "" })
    void previewStatus(store.addServer.url, store.addServer.username, value, (next) =>
      setStore("addServer", { status: next }),
@@ -325,7 +391,7 @@ export function DialogSelectServer() {
  }

  const handleEditChange = (value: string) => {
-    if (store.editServer.busy) return
+    if (editMutation.isPending) return
    setStore("editServer", { value, error: "" })
    void previewStatus(value, store.editServer.username, store.editServer.password, (next) =>
      setStore("editServer", { status: next }),
@@ -333,12 +399,12 @@ export function DialogSelectServer() {
  }

  const handleEditNameChange = (value: string) => {
-    if (store.editServer.busy) return
+    if (editMutation.isPending) return
    setStore("editServer", { name: value, error: "" })
  }

  const handleEditUsernameChange = (value: string) => {
-    if (store.editServer.busy) return
+    if (editMutation.isPending) return
    setStore("editServer", { username: value, error: "" })
    void previewStatus(store.editServer.value, value, store.editServer.password, (next) =>
      setStore("editServer", { status: next }),
@@ -346,85 +412,13 @@ export function DialogSelectServer() {
  }

  const handleEditPasswordChange = (value: string) => {
-    if (store.editServer.busy) return
+    if (editMutation.isPending) return
    setStore("editServer", { password: value, error: "" })
    void previewStatus(store.editServer.value, store.editServer.username, value, (next) =>
      setStore("editServer", { status: next }),
    )
  }

-  async function handleAdd(value: string) {
-    if (store.addServer.adding) return
-    const normalized = normalizeServerUrl(value)
-    if (!normalized) {
-      resetAdd()
-      return
-    }
-
-    setStore("addServer", { adding: true, error: "" })
-
-    const conn: ServerConnection.Http = {
-      type: "http",
-      http: { url: normalized },
-    }
-    if (store.addServer.name.trim()) conn.displayName = store.addServer.name.trim()
-    if (store.addServer.password) conn.http.password = store.addServer.password
-    if (store.addServer.password && store.addServer.username) conn.http.username = store.addServer.username
-    const result = await checkServerHealth(conn.http)
-    setStore("addServer", { adding: false })
-    if (!result.healthy) {
-      setStore("addServer", { error: language.t("dialog.server.add.error") })
-      return
-    }
-
-    resetAdd()
-    await select(conn, true)
-  }
-
-  async function handleEdit(original: ServerConnection.Any, value: string) {
-    if (store.editServer.busy || original.type !== "http") return
-    const normalized = normalizeServerUrl(value)
-    if (!normalized) {
-      resetEdit()
-      return
-    }
-
-    const name = store.editServer.name.trim() || undefined
-    const username = store.editServer.username || undefined
-    const password = store.editServer.password || undefined
-    const existingName = original.displayName
-    if (
-      normalized === original.http.url &&
-      name === existingName &&
-      username === original.http.username &&
-      password === original.http.password
-    ) {
-      resetEdit()
-      return
-    }
-
-    setStore("editServer", { busy: true, error: "" })
-
-    const conn: ServerConnection.Http = {
-      type: "http",
-      displayName: name,
-      http: { url: normalized, username, password },
-    }
-    const result = await checkServerHealth(conn.http)
-    setStore("editServer", { busy: false })
-    if (!result.healthy) {
-      setStore("editServer", { error: language.t("dialog.server.add.error") })
-      return
-    }
-    if (normalized === original.http.url) {
-      server.add(conn)
-    } else {
-      replaceServer(original, conn)
-    }
-
-    resetEdit()
-  }
-
  const mode = createMemo<"list" | "add" | "edit">(() => {
    if (store.editServer.id) return "edit"
    if (store.addServer.showForm) return "add"
@@ -464,23 +458,26 @@ export function DialogSelectServer() {
      password: conn.http.password ?? "",
      error: "",
      status: store.status[ServerConnection.key(conn)]?.healthy,
-      busy: false,
    })
  }

  const submitForm = () => {
    if (mode() === "add") {
-      void handleAdd(store.addServer.url)
+      if (addMutation.isPending) return
+      setStore("addServer", { error: "" })
+      addMutation.mutate(store.addServer.url)
      return
    }
    const original = editing()
    if (!original) return
-    void handleEdit(original, store.editServer.value)
+    if (editMutation.isPending) return
+    setStore("editServer", { error: "" })
+    editMutation.mutate({ original, value: store.editServer.value })
  }

  const isFormMode = createMemo(() => mode() !== "list")
  const isAddMode = createMemo(() => mode() === "add")
-  const formBusy = createMemo(() => (isAddMode() ? store.addServer.adding : store.editServer.busy))
+  const formBusy = createMemo(() => (isAddMode() ? addMutation.isPending : editMutation.isPending))

  const formTitle = createMemo(() => {
    if (!isFormMode()) return language.t("dialog.server.title")
--- a/packages/app/src/components/status-popover.tsx
+++ b/packages/app/src/components/status-popover.tsx
@@ -4,6 +4,7 @@ import { Icon } from "@opencode-ai/ui/icon"
 import { Popover } from "@opencode-ai/ui/popover"
 import { Switch } from "@opencode-ai/ui/switch"
 import { Tabs } from "@opencode-ai/ui/tabs"
+import { useMutation } from "@tanstack/solid-query"
 import { showToast } from "@opencode-ai/ui/toast"
 import { useNavigate } from "@solidjs/router"
 import { type Accessor, createEffect, createMemo, createSignal, For, type JSXElement, onCleanup, Show } from "solid-js"
@@ -130,41 +131,30 @@ const useDefaultServerKey = (
  }
 }

-const useMcpToggle = (input: {
-  sync: ReturnType<typeof useSync>
-  sdk: ReturnType<typeof useSDK>
-  language: ReturnType<typeof useLanguage>
-}) => {
-  const [loading, setLoading] = createSignal<string | null>(null)
+const useMcpToggleMutation = () => {
+  const sync = useSync()
+  const sdk = useSDK()
+  const language = useLanguage()

-  const toggle = async (name: string) => {
-    if (loading()) return
-    setLoading(name)
-
-    try {
-      const status = input.sync.data.mcp[name]
-      await (status?.status === "connected"
-        ? input.sdk.client.mcp.disconnect({ name })
-        : input.sdk.client.mcp.connect({ name }))
-      const result = await input.sdk.client.mcp.status()
-      if (result.data) input.sync.set("mcp", result.data)
-    } catch (err) {
+  return useMutation(() => ({
+    mutationFn: async (name: string) => {
+      const status = sync.data.mcp[name]
+      await (status?.status === "connected" ? sdk.client.mcp.disconnect({ name }) : sdk.client.mcp.connect({ name }))
+      const result = await sdk.client.mcp.status()
+      if (result.data) sync.set("mcp", result.data)
+    },
+    onError: (err) => {
      showToast({
        variant: "error",
-        title: input.language.t("common.requestFailed"),
+        title: language.t("common.requestFailed"),
        description: err instanceof Error ? err.message : String(err),
      })
-    } finally {
-      setLoading(null)
-    }
-  }
-
-  return { loading, toggle }
+    },
+  }))
 }

 export function StatusPopover() {
  const sync = useSync()
-  const sdk = useSDK()
  const server = useServer()
  const platform = usePlatform()
  const dialog = useDialog()
@@ -181,7 +171,7 @@ export function StatusPopover() {
  })
  const health = useServerHealth(servers)
  const sortedServers = createMemo(() => listServersByHealth(servers(), server.key, health))
-  const mcp = useMcpToggle({ sync, sdk, language })
+  const toggleMcp = useMcpToggleMutation()
  const defaultServer = useDefaultServerKey(platform.getDefaultServer)
  const mcpNames = createMemo(() => Object.keys(sync.data.mcp ?? {}).sort((a, b) => a.localeCompare(b)))
  const mcpStatus = (name: string) => sync.data.mcp?.[name]?.status
@@ -337,8 +327,11 @@ export function StatusPopover() {
                        <button
                          type="button"
                          class="flex items-center gap-2 w-full h-8 pl-3 pr-2 py-1 rounded-md hover:bg-surface-raised-base-hover transition-colors text-left"
-                          onClick={() => mcp.toggle(name)}
-                          disabled={mcp.loading() === name}
+                          onClick={() => {
+                            if (toggleMcp.isPending) return
+                            toggleMcp.mutate(name)
+                          }}
+                          disabled={toggleMcp.isPending && toggleMcp.variables === name}
                        >
                          <div
                            classList={{
@@ -354,8 +347,11 @@ export function StatusPopover() {
                          <div onClick={(event) => event.stopPropagation()}>
                            <Switch
                              checked={enabled()}
-                              disabled={mcp.loading() === name}
-                              onChange={() => mcp.toggle(name)}
+                              disabled={toggleMcp.isPending && toggleMcp.variables === name}
+                              onChange={() => {
+                                if (toggleMcp.isPending) return
+                                toggleMcp.mutate(name)
+                              }}
                            />
                          </div>
                        </button>