Skip to content

Reduce synchronous mount-time layout reads in the chat scroll controller #662

Description

@hamzamerzic

Context

On mount, the chat scroll controller (useScrollMode.js) performs many synchronous layout reads (getBoundingClientRect / offsetTop / scrollHeight — ~100 call sites) to position the transcript before reveal. On a switch this is the bulk of the ~90 ms forced reflow (now off the discrete tap via startTransition, but still paid once per switch).

Idea

Audit the mount-time layout reads and reduce or batch them: coalesce reads that can share one layout pass, and defer any not required before the pre-reveal positioning to after first paint (the transcript is hidden until reveal, so some reads may be safely deferrable). Fewer forced reflows during mount, without changing the scroll-restore contract.

Risk / what to verify

useScrollMode has strict single-task layout ordering to avoid visible scroll nudges — intricate, load-bearing code. Keep the scroll/anchor/reveal lock-in tests green and verify on-device with the field probe. Prefer small, well-isolated steps.

Acceptance

  • Fewer synchronous layout reads / lower forced-layout time on mount, measured.
  • No regression in scroll restoration, reveal timing, or existing tests.

Companion approach: a separate issue proposes content-visibility: auto on off-screen rows.

Metadata

Metadata

Assignees

No one assigned

    Labels

    area: uiUser interface and interaction designenhancementNew feature or request

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions