DetailsList: Remove drag and drop border animation causing style mutations via mergeStyles#7125
Conversation
|
@kenotron by chance, do you know how to trigger this animation? I'd like to repro it and see if we can fix using Edit: Good! Screener caught it. So it is still repro-able, will try in a bit. |
|
@KevinTCoughlin Happy to take a separate PR to add it back, but approving and merging this as it's a bad bug. |
|
FWIW I grepped the rest of OUIFR and did not see other usages of 🎉 |
|
🎉 Handy Links: |
|
Hey @dzearing and @KevinTCoughlin, what exactly did we remove here? I'd love to see what it was. |
|
@betrue-final-final still not sure how to reproduce this scenario completely but it seems like a border "pulse" from theme colored to transparent over a couple seconds. We needed to remove it because it's causing a serious perf bug, but we will need to re-evaluate the right fix separately. @KevinTCoughlin will follow up with @yiminwu on this issue and see what needs to be done. |
|
That doesn't seem intentional then. We didn't design a pulse for drag and drop. |
…yle mutations via mergeStyles (microsoft#7125)" This reverts commit aa9193c.
|
@KevinTCoughlin @kenotron @yiminwu Any update on using |
We just got |
6 participants
Pull request checklist
$ npm run changeDescription of changes
Removes the
border-coloranimation fromDetailsColumnwhich is not memoized due to the usage of key-frames. This is creating a new<styles/>tag per render (click, resize, etc.) causing performance issues.The animation was originally added in #4857 and refactored to use mergeStyles as part of #5490.
Focus areas to test
How to Test
You can test this by examining the
<style data-merge-styles="true" type="text/css"></style>which are added per interaction withDetailsList(anything that causes re-render). For example, clicking a row appends a node to<head>each time.Sample Test Output
Below are the count of nodes in
<head>before and after clicking 4 times on an alternating row which causes a re-render.Before
After
The one style-sheet added here are the styles for
DetailsListincluding focus, check, etc. So the increase in node count by 1 on initial click is expected behavior.Microsoft Reviewers: Open in CodeFlow