segmentio / evergreen

🌲 Evergreen React UI Framework by Segment
https://evergreen.segment.com
MIT License
12.38k stars 830 forks source link

Prevent Tooltip flickering by updating Positioner #1550

Closed brandongregoryscott closed 1 year ago

brandongregoryscott commented 1 year ago

Overview

This PR addresses #1548 where a flickering issue was introduced in the Portal/Positioner in #1517. I tested out the change in both the example repo listed in #1512 to verify SSR still works, and a personal project to verify the Tooltip isn't flickering - I couldn't reproduce the issue in Storybook.

I believe the issue is caused from the extra render introduced (this.forceUpdate()) - telling the Positioner to update once the Transition state is entering sets the correct dimensions and x/y points before rendering the children.

Screenshots (if applicable)

Rendering Before After
CSR Before - CSR After - CSR
SSR Before - SSR After- SSR

Documentation

netlify[bot] commented 1 year ago

Deploy Preview for evergreen-storybook ready!

Name Link
Latest commit 228395fd47029b306cf2c5bb755081a2a7cefcb2
Latest deploy log https://app.netlify.com/sites/evergreen-storybook/deploys/637ae50998b95600083d132e
Deploy Preview https://deploy-preview-1550--evergreen-storybook.netlify.app
Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify site settings.