perf(PageLayout): eliminate per-frame React renders during window resize

[Copilot]

During fast window resizing, usePaneWidth called startTransition(setState) on every throttled tick (~60 fps), stacking render requests that caused the pane DOM to visually "catch up" after the gesture ended.

What changed

packages/react/src/PageLayout/usePaneWidth.ts

• Split syncAll() into two functions:
  • syncDom() — mutates CSS custom properties (--pane-max-width, --pane-width), clamps currentWidthRef, and updates ARIA attributes via direct DOM manipulation. Zero React state changes.
  • commitToReact() — called exactly once at gesture end; flushes pending values into React state via startTransition only if they actually changed.
• Replaced the Date.now() throttle + rAF-fallback pattern (which could fire syncAll twice per frame on bursty input) with a single requestAnimationFrame coalesce: if a rAF is already pending, new resize events are dropped until it fires.
• The debounce callback now runs syncDom() (guaranteed final-frame sync) → commitToReact() (the one React commit for the whole gesture) → endResizeOptimizations().
• Added pendingMaxRef / pendingClampedRef to carry values across frames into the commit.

handleResize:
  startResizeOptimizations()          // synchronous, sets data-dragging
  if (rafId === null) {
    rafId = rAF(() => { syncDom() })  // DOM only, coalesced per frame
  }
  resetDebounce(() => {
    endResizeOptimizations()
    syncDom()          // guarantee final frame
    commitToReact()    // single startTransition for the whole gesture
  }, 150)

packages/react/src/PageLayout/usePaneWidth.test.ts

• Updated test names/comments to reflect rAF-coalescing semantics.
• Added a test that asserts startTransition is called zero times while resize events are firing (pre-debounce) and exactly once when the gesture ends.

Rollout strategy

• Patch release
• Minor release
• Major release; if selected, include a written rollout or migration plan
• None; if selected, include a brief description as to why

Testing & Reviewing

The key behavioral invariants are unchanged — --pane-max-width/--pane-width CSS variables and ARIA attributes continue to track the viewport in real time; only the React state commit is deferred. The new test exercises the zero-renders-during-gesture / one-commit-at-end contract directly.

Custom widths with constrainToViewport === false still bail out of the resize listener early (untouched). The drag-handle path is untouched.

Merge checklist

• Added/updated tests
• Added/updated documentation
• Added/updated previews (Storybook)
• Changes are SSR compatible
• Tested in Chrome
• Tested in Firefox
• Tested in Safari
• Tested in Edge
• (GitHub staff only) Integration tests pass at github/github-ui (Learn more about how to run integration tests)

[changeset-bot]

🦋 Changeset detected

Latest commit: 71cb606

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 1 package

Name	Type
@primer/react	Patch

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

[github-actions]

⚠️ Action required

👋 Hi, this pull request contains changes to the source code that github/github-ui depends on. If you are GitHub staff, test these changes with github/github-ui using the integration workflow. Check the integration testing docs for step-by-step instructions. Or, apply the integration-tests: skipped manually label to skip these checks.

To publish a canary release for integration testing, apply the Canary Release label to this PR.

[primer-integration]

👋 Hi from github/github-ui! Your integration PR is ready: https://github.com/github/github-ui/pull/21361

[primer-integration]

Integration test results from github/github-ui:

  CI Passed
  VRT Passed
  Projects Passed

All checks passed!