From d20ef569de852e56a5f84a972cefe0cb3633ff05 Mon Sep 17 00:00:00 2001 From: Dax Raad Date: Fri, 21 Nov 2025 00:47:27 -0500 Subject: [PATCH] tui: replace text shimmer with animated progress bar during model processing --- .../cli/cmd/tui/component/dialog-model.tsx | 15 -------- .../cli/cmd/tui/component/prompt/index.tsx | 37 ++++++++++++++++++- 2 files changed, 36 insertions(+), 16 deletions(-) diff --git a/packages/opencode/src/cli/cmd/tui/component/dialog-model.tsx b/packages/opencode/src/cli/cmd/tui/component/dialog-model.tsx index 77eda2271..d248bd821 100644 --- a/packages/opencode/src/cli/cmd/tui/component/dialog-model.tsx +++ b/packages/opencode/src/cli/cmd/tui/component/dialog-model.tsx @@ -4,23 +4,8 @@ import { useSync } from "@tui/context/sync" import { map, pipe, flatMap, entries, filter, isDeepEqual, sortBy, take } from "remeda" import { DialogSelect, type DialogSelectRef } from "@tui/ui/dialog-select" import { useDialog } from "@tui/ui/dialog" -import { useTheme } from "../context/theme" import { createDialogProviderOptions, DialogProvider } from "./dialog-provider" -function Free() { - const { theme } = useTheme() - return Free -} -const PROVIDER_PRIORITY: Record = { - opencode: 0, - anthropic: 1, - "github-copilot": 2, - openai: 3, - google: 4, - openrouter: 5, - vercel: 6, -} - export function DialogModel() { const local = useLocal() const sync = useSync() diff --git a/packages/opencode/src/cli/cmd/tui/component/prompt/index.tsx b/packages/opencode/src/cli/cmd/tui/component/prompt/index.tsx index 17ac2381c..b04cb7c60 100644 --- a/packages/opencode/src/cli/cmd/tui/component/prompt/index.tsx +++ b/packages/opencode/src/cli/cmd/tui/component/prompt/index.tsx @@ -806,7 +806,7 @@ export function Prompt(props: PromptProps) { justifyContent={status().type === "retry" ? "space-between" : "flex-start"} > - + {(() => { const retry = createMemo(() => { @@ -876,3 +876,38 @@ export function Prompt(props: PromptProps) { ) } + +function Loader() { + const FRAMES = [ + "▱▱▱▱▱▱▱", + "▱▱▱▱▱▱▱", + "▱▱▱▱▱▱▱", + "▱▱▱▱▱▱▱", + "▰▱▱▱▱▱▱", + "▰▰▱▱▱▱▱", + "▰▰▰▱▱▱▱", + "▱▰▰▰▱▱▱", + "▱▱▰▰▰▱▱", + "▱▱▱▰▰▰▱", + "▱▱▱▱▰▰▰", + "▱▱▱▱▱▰▰", + "▱▱▱▱▱▱▰", + "▱▱▱▱▱▱▱", + "▱▱▱▱▱▱▱", + "▱▱▱▱▱▱▱", + "▱▱▱▱▱▱▱", + ] + const [frame, setFrame] = createSignal(0) + + onMount(() => { + const timer = setInterval(() => { + setFrame((frame() + 1) % FRAMES.length) + }, 100) + onCleanup(() => { + clearInterval(timer) + }) + }) + + const { theme } = useTheme() + return {FRAMES[frame()]} +}