-
Notifications
You must be signed in to change notification settings - Fork 841
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
Prevent toggling loading
on tables from re-mounting visible rows
#2754
Prevent toggling loading
on tables from re-mounting visible rows
#2754
Conversation
…revent re-rendering the whole table when loading is set to true
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 withwindow.setIsLoading
in the console.
Needs a docs reversion and a CL entry
Also, the issue tagged this as urgent for 7.6. Are we looking to get this in with the (likely) backport release coming later this week? |
Yes. This was at request from @bmcconaghy and @mikecote. Their UI won't be active for 7.6 but I know they wanted this PR so they didn't need to comment out a bunch of tests. |
This reverts commit 7942eee.
Example reverted, changelog added. Will merge on green. |
Thanks for getting this done! Sorry I couldn't review as I was out on vacation. This solves the issue on our end 🙏 👍 |
Fixes #2612
Summary
Removed
EuiLoadingTableBody
& moved its functionality intoEuiBasicTable
. This prevents React from un- and re-mounting visible table rows and their components when theloading
prop changes, as the virtual dom structure remains the same.This also fixes a memory leak where the event listeners added which prevent interactions on a
loading
table were never removed.For testing, I've modified the first table example (A simple BasicTable) to have a popover on the Nationality column. A
setIsLoading
function is added to thewindow
object for toggling the table's state - execute it through the developer console, passingtrue
orfalse
. I'll revert the changes to this example before merging.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 examples- [ ] Checked for accessibility including keyboard-only and screenreader modes