-
Notifications
You must be signed in to change notification settings - Fork 844
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.
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
[EuiToolTip] Improve render performance #3596
Conversation
Preview documentation changes for this PR: https://eui.elastic.co/pr_3596/ |
Pulled this back to draft because, although there are definite improvements, CPU usage in the Kibana issue use case still remains high. |
Preview documentation changes for this PR: https://eui.elastic.co/pr_3596/ |
Preview documentation changes for this PR: https://eui.elastic.co/pr_3596/ |
Preview documentation changes for this PR: https://eui.elastic.co/pr_3596/ |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Tested in browser and double checked accessibility still works. I think it's worthwhile to clean up that sass function. Noticed some other small bits, otherwise LGTM on changes.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
LGTM! Tested locally, didn't see anything broken
Preview documentation changes for this PR: https://eui.elastic.co/pr_3596/ |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Thanks for the changes! LGTM
Summary
Resolves #3568 by 1) moving the animation delay from CSS to JS and using it to delay subcomponent mounting and 2) using the
enqueueStateChange
utility to batch EuiToolTip visibility state updates that result in DOM node add/remove updates.Secondary improvement was to remove the EuiToolTipPopover initialization call to
updateDimensions
, as the nested EuiResizeObserver component also calls the method on mount.Checklist
- [ ] Check against all themes for compatibility in both light and dark modes- [ ] Checked in mobile- [ ] Checked in IE11 and Firefox- [ ] Props have proper autodocs- [ ] Added documentation