fix(app): avoid shortcut settings flash (#35349)

Co-authored-by: Jay <53023+jayair@users.noreply.github.com>

packages/app/src/components/dialog-settings.tsx

@@ -1,4 +1,4 @@
-import { Component } from "solid-js"
+import { Component, createSignal, startTransition } from "solid-js"
 import { Dialog } from "@opencode-ai/ui/dialog"
 import { Tabs } from "@opencode-ai/ui/tabs"
 import { Icon } from "@opencode-ai/ui/icon"
@@ -15,6 +15,7 @@ export const DialogSettings: Component<{ defaultValue?: string }> = (props) => {
   const language = useLanguage()
   const platform = usePlatform()
   const dialog = useDialog()
+  const [tab, setTab] = createSignal(props.defaultValue ?? "general")
 
   const showProviders = () => {
     void dialog.show(() => <DialogSettings defaultValue="providers" />)
@@ -25,7 +26,8 @@ export const DialogSettings: Component<{ defaultValue?: string }> = (props) => {
       <Tabs
         orientation="vertical"
         variant="settings"
-        defaultValue={props.defaultValue ?? "general"}
+        value={tab()}
+        onChange={(value) => void startTransition(() => setTab(value))}
         class="h-full settings-dialog"
       >
         <Tabs.List>

packages/app/src/components/settings-keybinds.tsx

@@ -5,24 +5,18 @@ import { Button } from "@opencode-ai/ui/button"
 import { Icon } from "@opencode-ai/ui/icon"
 import { IconButton } from "@opencode-ai/ui/icon-button"
 import { TextField } from "@opencode-ai/ui/text-field"
+import { ButtonV2 } from "@opencode-ai/ui/v2/button-v2"
+import { IconButtonV2 } from "@opencode-ai/ui/v2/icon-button-v2"
+import { TextInputV2 } from "@opencode-ai/ui/v2/text-input-v2"
 import { showToast } from "@/utils/toast"
 import fuzzysort from "fuzzysort"
 import { formatKeybind, parseKeybind, useCommand } from "@/context/command"
 import { useLanguage } from "@/context/language"
 import { useSettings } from "@/context/settings"
 import { SettingsList } from "./settings-list"
+import { SettingsListV2 } from "./settings-v2/parts/list"
 
-const ButtonV2 = lazy(() => import("@opencode-ai/ui/v2/button-v2").then((module) => ({ default: module.ButtonV2 })))
 const IconV2 = lazy(() => import("@opencode-ai/ui/v2/icon").then((module) => ({ default: module.Icon })))
-const IconButtonV2 = lazy(() =>
-  import("@opencode-ai/ui/v2/icon-button-v2").then((module) => ({ default: module.IconButtonV2 })),
-)
-const TextInputV2 = lazy(() =>
-  import("@opencode-ai/ui/v2/text-input-v2").then((module) => ({ default: module.TextInputV2 })),
-)
-const SettingsListV2 = lazy(() =>
-  import("./settings-v2/parts/list").then((module) => ({ default: module.SettingsListV2 })),
-)
 
 const IS_MAC = typeof navigator === "object" && /(Mac|iPod|iPhone|iPad)/.test(navigator.platform)
 const PALETTE_ID = "command.palette"

packages/app/src/components/settings-v2/dialog-settings-v2.tsx

@@ -1,4 +1,4 @@
-import { Component } from "solid-js"
+import { Component, createSignal, startTransition } from "solid-js"
 import { Dialog } from "@opencode-ai/ui/v2/dialog-v2"
 import { TabsV2 } from "@opencode-ai/ui/v2/tabs-v2"
 import { Icon } from "@opencode-ai/ui/icon"
@@ -19,6 +19,7 @@ export const DialogSettings: Component<{
   const language = useLanguage()
   const platform = usePlatform()
   const dialog = useDialog()
+  const [tab, setTab] = createSignal(props.defaultValue ?? "general")
 
   const showProviders = () => {
     void dialog.show(() => <DialogSettings sessionID={props.sessionID} defaultValue="providers" />)
@@ -29,7 +30,8 @@ export const DialogSettings: Component<{
       <TabsV2
         orientation="vertical"
         variant="settings"
-        defaultValue={props.defaultValue ?? "general"}
+        value={tab()}
+        onChange={(value) => void startTransition(() => setTab(value))}
         class="settings-v2"
       >
         <TabsV2.List>