11import { useFilteredList } from "@opencode-ai/ui/hooks"
22import { useSpring } from "@opencode-ai/ui/motion-spring"
3- import { createEffect , on , Component , Show , onCleanup , createMemo , createSignal } from "solid-js"
3+ import { createEffect , on , Component , Show , onCleanup , createMemo , createSignal , createResource } from "solid-js"
44import { createStore } from "solid-js/store"
55import { useLocal } from "@/context/local"
66import { selectionFromLines , type SelectedLineRange , useFile } from "@/context/file"
@@ -54,7 +54,7 @@ import { PromptImageAttachments } from "./prompt-input/image-attachments"
5454import { PromptDragOverlay } from "./prompt-input/drag-overlay"
5555import { promptPlaceholder } from "./prompt-input/placeholder"
5656import { ImagePreview } from "@opencode-ai/ui/image-preview"
57- import { useQuery } from "@tanstack/solid-query"
57+ import { useQueries , useQuery } from "@tanstack/solid-query"
5858import { loadAgentsQuery , loadProvidersQuery } from "@/context/global-sync/bootstrap"
5959
6060interface PromptInputProps {
@@ -1252,16 +1252,21 @@ export const PromptInput: Component<PromptInputProps> = (props) => {
12521252 }
12531253 }
12541254
1255- const agentsQuery = useQuery ( ( ) => loadAgentsQuery ( sdk . directory ) )
1256- const agentsLoading = ( ) => agentsQuery . isLoading
1257-
1258- const globalProvidersQuery = useQuery ( ( ) => loadProvidersQuery ( null ) )
1259- const providersQuery = useQuery ( ( ) => loadProvidersQuery ( sdk . directory ) )
1255+ const [ agentsQuery , globalProvidersQuery , providersQuery ] = useQueries ( ( ) => ( {
1256+ queries : [ loadAgentsQuery ( sdk . directory ) , loadProvidersQuery ( null ) , loadProvidersQuery ( sdk . directory ) ] ,
1257+ } ) )
12601258
1259+ const agentsLoading = ( ) => agentsQuery . isLoading
12611260 const providersLoading = ( ) => agentsLoading ( ) || providersQuery . isLoading || globalProvidersQuery . isLoading
12621261
1262+ const [ promptReady ] = createResource (
1263+ ( ) => prompt . ready ( ) . promise ,
1264+ ( p ) => p ,
1265+ )
1266+
12631267 return (
12641268 < div class = "relative size-full _max-h-[320px] flex flex-col gap-0" >
1269+ { ( promptReady ( ) , null ) }
12651270 < PromptPopover
12661271 popover = { store . popover }
12671272 setSlashPopoverRef = { ( el ) => ( slashPopoverRef = el ) }
@@ -1358,15 +1363,13 @@ export const PromptInput: Component<PromptInputProps> = (props) => {
13581363 } }
13591364 style = { { "padding-bottom" : space } }
13601365 />
1361- < Show when = { ! prompt . dirty ( ) } >
1362- < div
1363- class = "absolute top-0 inset-x-0 pl-3 pr-2 pt-2 text-14-regular text-text-weak pointer-events-none whitespace-nowrap truncate"
1364- classList = { { "font-mono!" : store . mode === "shell" } }
1365- style = { { "padding-bottom" : space } }
1366- >
1367- { placeholder ( ) }
1368- </ div >
1369- </ Show >
1366+ < div
1367+ class = "absolute top-0 inset-x-0 pl-3 pr-2 pt-2 text-14-regular text-text-weak pointer-events-none whitespace-nowrap truncate"
1368+ classList = { { "font-mono!" : store . mode === "shell" } }
1369+ style = { { "padding-bottom" : space , display : prompt . dirty ( ) ? "none" : undefined } }
1370+ >
1371+ { placeholder ( ) }
1372+ </ div >
13701373 </ div >
13711374
13721375 < div
@@ -1457,7 +1460,7 @@ export const PromptInput: Component<PromptInputProps> = (props) => {
14571460 </ div >
14581461 < div class = "flex items-center gap-1.5 min-w-0 flex-1 h-7" >
14591462 < Show when = { ! agentsLoading ( ) } >
1460- < div data-component = "prompt-agent-control" >
1463+ < div data-component = "prompt-agent-control" style = { { animation : "fade-in 0.3s" } } >
14611464 < TooltipKeybind
14621465 placement = "top"
14631466 gutter = { 4 }
@@ -1483,7 +1486,7 @@ export const PromptInput: Component<PromptInputProps> = (props) => {
14831486 </ Show >
14841487 < Show when = { ! providersLoading ( ) } >
14851488 < Show when = { store . mode !== "shell" } >
1486- < div data-component = "prompt-model-control" >
1489+ < div data-component = "prompt-model-control" style = { { animation : "fade-in 0.3s" } } >
14871490 < Show
14881491 when = { providers . paid ( ) . length > 0 }
14891492 fallback = {
@@ -1554,7 +1557,7 @@ export const PromptInput: Component<PromptInputProps> = (props) => {
15541557 </ TooltipKeybind >
15551558 </ Show >
15561559 </ div >
1557- < div data-component = "prompt-variant-control" >
1560+ < div data-component = "prompt-variant-control" style = { { animation : "fade-in 0.3s" } } >
15581561 < TooltipKeybind
15591562 placement = "top"
15601563 gutter = { 4 }
0 commit comments