fix(app): prevent prompt input animations from rerunning on every render (#23676)

1 files changed, 15 insertions, 4 deletions

diff --git a/packages/app/src/components/prompt-input.tsx b/packages/app/src/components/prompt-input.tsx
index 1131baa49..06c91c292 100644
--- a/packages/app/src/components/prompt-input.tsx
+++ b/packages/app/src/components/prompt-input.tsx
@@ -54,7 +54,7 @@ import { PromptImageAttachments } from "./prompt-input/image-attachments"
 import { PromptDragOverlay } from "./prompt-input/drag-overlay"
 import { promptPlaceholder } from "./prompt-input/placeholder"
 import { ImagePreview } from "@opencode-ai/ui/image-preview"
-import { useQueries, useQuery } from "@tanstack/solid-query"
+import { useQueries } from "@tanstack/solid-query"
 import { loadAgentsQuery, loadProvidersQuery } from "@/context/global-sync/bootstrap"
 
 interface PromptInputProps {
@@ -1257,7 +1257,9 @@ export const PromptInput: Component<PromptInputProps> = (props) => {
   }))
 
   const agentsLoading = () => agentsQuery.isLoading
+  const agentsShouldFadeIn = createMemo((prev) => prev ?? agentsLoading())
   const providersLoading = () => agentsLoading() || providersQuery.isLoading || globalProvidersQuery.isLoading
+  const providersShouldFadeIn = createMemo((prev) => prev ?? providersLoading())
 
   const [promptReady] = createResource(
     () => prompt.ready().promise,
@@ -1460,7 +1462,10 @@ export const PromptInput: Component<PromptInputProps> = (props) => {
               </div>
               <div class="flex items-center gap-1.5 min-w-0 flex-1 h-7">
                 <Show when={!agentsLoading()}>
-                  <div data-component="prompt-agent-control" style={{ animation: "fade-in 0.3s" }}>
+                  <div
+                    data-component="prompt-agent-control"
+                    style={agentsShouldFadeIn() ? { animation: "fade-in 0.3s" } : undefined}
+                  >
                     <TooltipKeybind
                       placement="top"
                       gutter={4}
@@ -1486,7 +1491,10 @@ export const PromptInput: Component<PromptInputProps> = (props) => {
                 </Show>
                 <Show when={!providersLoading()}>
                   <Show when={store.mode !== "shell"}>
-                    <div data-component="prompt-model-control" style={{ animation: "fade-in 0.3s" }}>
+                    <div
+                      data-component="prompt-model-control"
+                      style={providersShouldFadeIn() ? { animation: "fade-in 0.3s" } : undefined}
+                    >
                       <Show
                         when={providers.paid().length > 0}
                         fallback={
@@ -1557,7 +1565,10 @@ export const PromptInput: Component<PromptInputProps> = (props) => {
                         </TooltipKeybind>
                       </Show>
                     </div>
-                    <div data-component="prompt-variant-control" style={{ animation: "fade-in 0.3s" }}>
+                    <div
+                      data-component="prompt-variant-control"
+                      style={providersShouldFadeIn() ? { animation: "fade-in 0.3s" } : undefined}
+                    >
                       <TooltipKeybind
                         placement="top"
                         gutter={4}