<Tooltip> Performance problems in <Table>
Closed this issue · 4 comments
Describe the bug (current behavior)
Using <Tooltip> components in <Table> is causing MAJOR performance problems.
Scrolling becomes jumpy, laggy.
Mostly visible in Chromium browsers. Firefox works a bit better (not perfect)
There are cases where we want to add a Tooltip on icon in table cell
Expected Behavior
<Tooltip> Should not impact scrolling performance
Link to minimal repro
https://stackblitz.com/edit/github-1zi5p3?file=src%2FApp.tsx
Steps To Reproduce
- Create table with 100 rows. Render rows with <Tooltip>
- Try scrolling the table
Anything else?
Using version: @itwin/itwinui-react: 3*
Tested on Mac, looks like it handles scroll better, elements disappear for a while.
On windows Chrome scrolling is terrible
Hello, thank you for submitting this issue. I was able to confirm the performance issues on Windows, on Chrome and Firefox, with Firefox working a bit better, as the issue mentions. @mayank99 seems like all of the floating-ui elements are being rerendered on react-table scroll, which causes the performance issue. Do you know of a way that we could potentially memo them?
While custom cells are always going to be a problem when every row has multiple of them and when there are hundreds of (unvirtualized) rows, we can definitely optimize our Tooltip component to not update its position when it's not visible.
Screen recording below shows that floating-ui currently attempts to keep updating the tooltip position even when they're hidden; I might report this is as a bug in floating-ui even if we implement a workaround in iTwinUI
Screen recording
Screen.Recording.2024-04-16.at.12.27.08.PM.mov
Unrelated: Tooltip should not be used on non-interactive trigger elements (such as text or icon). See docs.