fix(conversations): Redesign the timeline loading skeleton#119103
Merged
priscilawebdev merged 11 commits intoJul 8, 2026
Conversation
github-actions
Bot
added
the
Scope: Frontend
Add ConversationViewSkeletonNew, a loading placeholder for the redesigned timeline tab that mirrors the real AiSpanTimeline render: a bordered span-row card (icon, title/tool-name, optional secondary, metric + duration columns, timeline bar) on the left and the fixed-width span-detail card on the right. Wire it into ConversationViewContentNew (redesign path only) and add the missing Trace-link placeholder to the summary header skeleton. The legacy ConversationViewSkeleton is left untouched. Co-Authored-By: Claude <noreply@anthropic.com>
priscilawebdev
force-pushed
the
worktree-fix-conversation-timeline-skeleton
branch
from
e88c9c1 to
3b3d2a5
Compare
Extract ConversationTimelineLayout so the live timeline view and its loading skeleton render into the same two-column shell instead of hand-duplicating the wrapper markup, which had already started to drift (the skeleton detail header used a tighter gap than the real card). Also fix the stale comment claiming the timeline tab still uses the legacy span-detail skeleton, and key the skeleton rows by content rather than array index. Co-Authored-By: Claude <noreply@anthropic.com>
Extract SpanDetailCard so ConversationSpanDetail and the loading skeleton share the card's outer geometry (border, radius, padding, height) instead of each declaring it, keeping the box the content lands in identical across the two. Also drop null/false noise from the timeline skeleton row table via optional props. Co-Authored-By: Claude <noreply@anthropic.com>
…nelNew Move the isLoading branch into MessagesPanelNew via an optional isLoading prop so the panel renders its own skeleton, instead of the view picking between MessagesPanelSkeleton and MessagesPanelNew at the call site. The skeleton is now internal to the module. No behavior change. Co-Authored-By: Claude <noreply@anthropic.com>
The timeline loading skeleton placed the metric and duration placeholders in a single flex-end block with no reserved widths, so the right edge snapped to fixed columns when real content loaded. Mirror TimelineRow's 100px/56px columns and flex-1 secondary spacer so the layout no longer shifts on load. Co-Authored-By: Claude <noreply@anthropic.com>
The span-detail skeleton drew a full-width borderBottom under the tab placeholders, but the real flat TabList has no such divider (only a 2px accent under the selected tab). Drop the divider and widen the tab-label placeholders so the skeleton matches the loaded layout. Co-Authored-By: Claude <noreply@anthropic.com>
Co-Authored-By: Claude <noreply@anthropic.com>
Drop the whole-view ConversationViewSkeletonNew early return and move each skeleton into the component that renders it: the timeline skeleton lives in AiSpanTimeline (behind an isLoading prop) and the span-detail skeleton in ConversationSpanDetail (isLoading prop, node now optional). The view passes isLoading to each panel, mirroring MessagesPanelNew. Delete the now-unused conversationViewSkeleton file. Co-Authored-By: Claude <noreply@anthropic.com>
Widen the title placeholders in the timeline loading skeleton so they read more like real span/tool labels, and inline the span-detail visibility check at its single use site. Co-Authored-By: Claude <noreply@anthropic.com>
Switch the timeline skeleton title/secondary placeholders from fixed px to percentage widths so they scale with the pane instead of clipping or looking stubby, and slim the token/duration columns (100/56 -> 64/44px) so rows read well down to narrow (iPhone SE) widths. Co-Authored-By: Claude <noreply@anthropic.com>
…sation-timeline-skeleton # Conflicts: # static/app/views/explore/conversations/components/messagesPanelNew.tsx # static/app/views/insights/pages/agents/components/aiSpanTimeline.tsx
ArthurKnaus
approved these changes
Jul 8, 2026
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Before
After