Skip to content

[Page Actions] Fix render issues #7388

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom
Merged
merged 3 commits into from
Oct 13, 2022
Merged

[Page Actions] Fix render issues #7388

merged 3 commits into from
Oct 13, 2022

Conversation

@kyledurand
Copy link
Member

@kyledurand kyledurand commented Oct 12, 2022 •
edited
Loading

Fixes: #7330
Spin link

@kyledurand kyledurand self-assigned this Oct 12, 2022
@kyledurand kyledurand force-pushed the page_actions-fix-renders branch from 8f138c1 to 7bedc71 Compare October 12, 2022 18:48
@kyledurand
Copy link
Member Author

kyledurand commented Oct 12, 2022

/snapit

@github-actions
Copy link
Contributor

github-actions bot commented Oct 12, 2022 •
edited
Loading

size-limit report 📦

Path Size
polaris-react-cjs 209.07 KB (+0.02% 🔺)
polaris-react-esm 135.52 KB (+0.01% 🔺)
polaris-react-esnext 190.89 KB (+0.01% 🔺)
polaris-react-css 41.52 KB (0%)

@github-actions
Copy link
Contributor

github-actions bot commented Oct 12, 2022

🫰✨ Thanks @kyledurand! Your snapshots have been published to npm.

Test the snapshots by updating your package.json with the newly published versions:

yarn add @shopify/[email protected]
yarn add @shopify/[email protected]
yarn add @shopify/[email protected]

@kyledurand kyledurand force-pushed the page_actions-fix-renders branch from 7bedc71 to 9c2ccea Compare October 12, 2022 19:23
@kyledurand
Copy link
Member Author

kyledurand commented Oct 12, 2022

/snapit

@github-actions
Copy link
Contributor

github-actions bot commented Oct 12, 2022

🫰✨ Thanks @kyledurand! Your snapshots have been published to npm.

Test the snapshots by updating your package.json with the newly published versions:

yarn add @shopify/[email protected]
yarn add @shopify/[email protected]
yarn add @shopify/[email protected]

kyledurand
kyledurand commented Oct 13, 2022
View reviewed changes
polaris-react/src/components/ActionMenu/components/Actions/Actions.tsx
}
useEventListener('resize', handleResize);

useLayoutEffect(() => {
Copy link
Member Author

@kyledurand kyledurand Oct 13, 2022 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This part of the PR is the fix. The rest is just cleanup and changing our details page to better mimic product details

From docs:

The signature is identical to useEffect, but it fires synchronously after all DOM mutations. Use this to read layout from the DOM and synchronously re-render. Updates scheduled inside useLayoutEffect will be flushed synchronously, before the browser has a chance to paint.

One of the suggestions from @kushp was to use flushSync to defer the state update but isn't great for performance. useLayoutEffect seems to do the same thing but from what I've read in a different way that shouldn't affect performance. This waits until DOM stuff has finished before painting, removing layout thrashing

@kyledurand kyledurand marked this pull request as ready for review October 13, 2022 12:23
henryyi
henryyi approved these changes Oct 13, 2022
View reviewed changes
Copy link
Contributor

@henryyi henryyi left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🎩 and changes look good!

@kyledurand kyledurand merged commit 5bc8857 into main Oct 13, 2022
@kyledurand kyledurand deleted the page_actions-fix-renders branch October 13, 2022 21:35
@github-actions github-actions bot mentioned this pull request Oct 13, 2022
Merged
kyledurand pushed a commit that referenced this pull request Oct 14, 2022
@github-actions
Version Packages (#7382)
03e0200 
This PR was opened by the [Changesets
release](https://github.com/changesets/action) GitHub action. When
you're ready to do a release, you can merge this and the packages will
be published to npm automatically. If you're not ready to do a release
yet, that's fine, whenever you add more changesets to main, this PR will
be updated.


# Releases
## @shopify/[email protected]

### Minor Changes

- [#7373](#7373)
[`56c82ee8d`](56c82ee)
Thanks [@aaronccasanova](https://github.com/aaronccasanova)! - Add
`getFunctionArgs` utility

### Patch Changes

- Updated dependencies
\[[`c3f427c17`](c3f427c)]:
    -   @shopify/[email protected]

## @shopify/[email protected]

### Minor Changes

- [#7364](#7364)
[`e4b2c36d8`](e4b2c36)
Thanks [@Bringer128](https://github.com/Bringer128)! - Deprecated
Collapsible preventMeasuringOnChildrenUpdate.
Fixed bug where Collapsible would get stuck in animating state when
duration is 0.
Add support for intentionally disabling the transition in Collapsible.

### Patch Changes

- [#7363](#7363)
[`8a6c323e2`](8a6c323)
Thanks [@aveline](https://github.com/aveline)! - Added `id` prop to
`Text` and `Box`


- [#7348](#7348)
[`ea2a45bbb`](ea2a45b)
Thanks [@aveline](https://github.com/aveline)! - Added `setMediaWidth`
breakpoints test utility


- [#7388](#7388)
[`5bc885765`](5bc8857)
Thanks [@kyledurand](https://github.com/kyledurand)! - Fixed a re-render
bug with Page Actions

- Updated dependencies
\[[`c3f427c17`](c3f427c)]:
    -   @shopify/[email protected]

## @shopify/[email protected]

### Patch Changes

- Updated dependencies
\[[`56c82ee8d`](56c82ee)]:
    -   @shopify/[email protected]

## @shopify/[email protected]

### Patch Changes

- [#7385](#7385)
[`c3f427c17`](c3f427c)
Thanks [@laurkim](https://github.com/laurkim)! - Refactored exported
alias and scale types in `breakpoints`, `depth`, `font`, `motion`,
`shape`, `spacing`, and `zIndex`.

## @shopify/[email protected]

### Patch Changes

- Updated dependencies
\[[`c3f427c17`](c3f427c)]:
    -   @shopify/[email protected]

## [email protected]

### Minor Changes

- [#7032](#7032)
[`40ee692aa`](40ee692)
Thanks [@gwyneplaine](https://github.com/gwyneplaine)! - Added Playroom
integration to Polaris docs site.

### Patch Changes

- [#7032](#7032)
[`40ee692aa`](40ee692)
Thanks [@gwyneplaine](https://github.com/gwyneplaine)! - Improved the
design of the Sandbox feature.


- [#7400](#7400)
[`9f9fe1f99`](9f9fe1f)
Thanks [@kyledurand](https://github.com/kyledurand)! - Fixed a scaling
bug caused by content overflow
Fixed a bug where examples that don't have any content wouldn't show up
- Updated dependencies
\[[`8a6c323e2`](8a6c323),
[`e4b2c36d8`](e4b2c36),
[`c3f427c17`](c3f427c),
[`ea2a45bbb`](ea2a45b),
[`5bc885765`](5bc8857)]:
    -   @shopify/[email protected]
    -   @shopify/[email protected]

## [email protected]

### Patch Changes

- Updated dependencies
\[[`8a6c323e2`](8a6c323),
[`e4b2c36d8`](e4b2c36),
[`ea2a45bbb`](ea2a45b),
[`5bc885765`](5bc8857)]:
    -   @shopify/[email protected]

Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

@henryyi henryyi henryyi approved these changes

@alex-page alex-page Awaiting requested review from alex-page

+1 more reviewer

@tmlayton tmlayton tmlayton approved these changes

Reviewers whose approvals may not affect merge requirements

Assignees

@kyledurand kyledurand

Labels

None yet

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

[Page] Title and secondary actions flicker on form state change

3 participants

@kyledurand @tmlayton @henryyi