-
[OPIK-6334] [FE] feat: add skeleton loaders to Prompt and Agent Playgrounds (#6618)
frostbyte_neo 发布于
2026-05-06 10:25:18 +00:00 - [OPIK-6334] [FE] feat: add skeleton loader to Prompt Playground
Replace full-page Loader on PlaygroundPage with a custom skeleton
matching Figma 533:83979 (main panels) and 533:84053 (right
AddVariant column). Page chrome (PlaygroundHeader with title +
actions) renders immediately; the prompt editor and outputs area
show shimmer placeholders until provider keys load.Also fixes a header layout regression introduced by removing the
early-return Loader: headerMaxWidth was computed as
calc(promptCount * --max-prompt-width + --add-variant-width), which
collapses to 90px while promptCount=0 during the initial load. Skip
the maxWidth constraint while pending so the header fills full width
and justify-between renders title/actions on opposite ends.- [OPIK-6334] [FE] feat: add skeleton loader to Agent Playground
Replace the brief flash of on first render with
a skeleton placeholder for users whose agent is already paired. The
skeleton mirrors the connected layout (ResizablePanelGroup with Input
and Result panels) and shares autoSaveId="agent-sandbox-layout" so it
respects the user's persisted resize ratio — no jump when the
connected state mounts.Expose isInitialLoading from usePairingState (true only until the
first response from useSandboxConnectionStatus, derived from
isFetched). isPending alone toggled true on every poll cycle while
the connection-status query stayed in error/no-data state, causing
the skeleton to blink every 3 seconds against a permanently-erroring
backend; isFetched becomes stable after the first response and
prevents that blink.Update usePairingState and AgentRunnerContent tests/mocks to reflect
the new field name.- fix(skeleton): use theme-aware bg-background in playground skeletons
Replace hard-coded bg-white with bg-background on the bottom panel of
both playground skeletons so they render correctly in dark mode and
match the actual loaded state's background (PlaygroundOutputs and
AgentRunnerResult both use bg-background).下载附件