PageLayout: Fix layout shift for divider=line

[siddharthkp]

• Closes VerticalDivider for PageLayout.Pane always initially renders as style 'none' #3331

Problem

When using <PageLayout.Pane divider={{regular: 'line', narrow: 'none'}}>, we need to figure out which responsive value to use (regular, narrow or wide)

The hook useResponsiveValue we use renders the default (no divider) before the passed variant (like line) is rendered. This causes some layout shift (see video below)

search-shift.mov

This shift is slightly worse when the page is rendered on the server because this hook is not SSR compatible:

copilot-shift.mov

Note: This shift is also visible even when we have the same variant across screen sizes (<PageLayout.Pane divider="line">)

 

Changed

The ideal solution here would be to make this change css only, and not need any client side javascript. This however isn't very trivial and requires some time.

This PR has a pragmatic solution just for PageLayout to eliminate layout shift for the most common use case of <PageLayout.Pane divider="line"> by rendering a transparent divider for divider=none. This will hopefully buy us more time to fix the actual cause.

 

Before: There is no divider rendered at first, and then it renders and pushes the content away causing a layout shift

divider-before.mov

After: There is a transparent divider rendered at first, which does not cause any layout shift

divider-after.mov

 

Rollout strategy

• Patch release

Testing & Reviewing

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 (Learn more about how to run integration tests)

[changeset-bot]

🦋 Changeset detected

Latest commit: c56be30

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]

size-limit report 📦

Path	Size
dist/browser.esm.js	113.24 KB (+0.01% 🔺)
dist/browser.umd.js	113.89 KB (+0.01% 🔺)

[joshblack]

Just wanted to confirm, are the changes to layout in the snapshots intended with this change or is the layout not expected to change in this way?

[siddharthkp]

@joshblack Nah, those are all wrong 😢 Converted back to drafts

[github-actions]

Hi! This pull request has been marked as stale because it has been open with no activity for 60 days. You can comment on the pull request or remove the stale label to keep it open. If you do nothing, this pull request will be closed in 7 days.

[siddharthkp]

This was bigger than I initially anticipated, abandoning this