Skip to content

Workspace: the sidebar's agent and chat lists jump as they load — hold the layout and fade content in #3672

Closed

Description

@vybe

Summary

When the Workspace opens, the left sidebar with the agent list and the chats fills in piece by piece. Each part pushes the others around as its data arrives: rows appear, sections grow, and the content beside it moves. The first thing a person sees every morning is the page jumping. Loading should look calm instead. Every part keeps its place from the first frame, and the content fades into place once its data arrives.

Journey Impact: none: visual polish of an existing load. No promise changes.

Context

  • Operator, 2026-10-13: "components are jumping as they load on the first rail with chat and agents. It should be nicely load-animated smooth."
  • The design system already sets this bar: no layout shift when content arrives (principle 30). Loading states for lists and threads use skeletons. The scanline loading beam is for charts only.
  • The Workspace already has skeleton pieces (PortalSkeleton.vue, PortalInboxSkeleton.vue). The sidebar's first load does not follow the same rule.

Acceptance Criteria

  • On a cold load of the Workspace, the sidebar's agent list and chat list hold their final layout from the first frame. Before data arrives they show skeleton rows sized like the real rows. Nothing below them or beside them moves when the data arrives.
  • Content replaces its skeleton with one short, consistent fade (the same timing for every section). Rows do not pop in one at a time.
  • Sections whose data arrives at different times do not shift each other. A section that turns out empty keeps a stable empty state, with no collapse-and-reflow.
  • The main stage and the right rail do not shift when the sidebar finishes loading.
  • prefers-reduced-motion turns the fade off. Placement stays the same.
  • Works in both themes and at phone width.
  • Measured: cumulative layout shift on a cold Workspace load is ~0 (below 0.01) in a recorded run, before and after numbers in the PR.

Technical Notes

  • Surfaces: src/frontend/src/components/portal/PortalSidebar.vue, src/frontend/src/views/Portal.vue, and the existing PortalSkeleton.vue pattern.
  • Binding for all frontend work: docs/memory/design-system-contract.md and docs/memory/design-system.md.

Activity

  1. added
    status-readyGreenlit and ready for development (vetted; counterpart to status-incubating)
    on Oct 13, 2026
  2. added and removed
    status-readyGreenlit and ready for development (vetted; counterpart to status-incubating)
    on Oct 13, 2026
  3. added
    status-in-devMerged to dev, awaiting release cut to main
    and removed on Oct 13, 2026
  4. removed
    status-in-devMerged to dev, awaiting release cut to main
    on Oct 26, 2026
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

No one assigned

    Type

    No type

    Projects

    No projects

      Milestone

      No milestone

      Relationships

      None yet

      Development

      No branches or pull requests

      Issue actions