Table: poor performance/css issues

[piatrashkakanstantinass]

Describe the bug (current behavior)

Check: https://github.com/piatrashkakanstantinass/itwin-table-performance-test (Live URL)

Hi!

We use Table component in our project and have noticed performance issues when we lazy load the data. I have created a separate project to attempt to reproduce some performance issues that we have.

Issues:

• Items at the end do not show up after page loaded and virtualization is enabled (if you toggle virtualization via button or use a timer with useEffect it works)
• If you disable and reenable virtualization, rows will load, but performance feels slightly sluggish (Chrome).
• When devtools are opened, performance is generally a bit worse
• When react devtool "Highlight updates when components render." is enabled, rows are updated later than expect (virtualization enabled) (I guess that is expected to some degree)
• (Our project only) (When react highlight devtool is enabled, rows flicker)
• Performance devtool suggests that Forced reflow is a possible performance bottleneck

[piatrashkakanstantinass]

https://github.com/iTwin/iTwinUI/assets/115642938/f2f8a791-37c0-40aa-b85d-ee9c716541ff

Sample table inside our project with virtualization enabled (no manual scrolling). Issue disappears when devtools are closed

[mayank99]

Hey @piatrashkakanstantinass, thanks for the issue. Can you explain what you're actually trying to achieve? Some of those issues you listed out (e.g. when using browser devtools or react dev tools) are totally expected. But I feel like virtualization should be unnecessary if you're already lazy-loading the data.

The main goal of virtualization is to reduce the amount of work that React (render) and the browser (paint) has to do when there are lots of rows. If you're lazy-loading your data in chunks, then React should already be fast enough without virtualization. And to reduce the amount of work the browser has to do, you can try using content-visibility instead of virtualization.

It's also worth noting that virtualization is an experimental feature and we've had some reports in the past that it causes unexpected issues (#888).

[piatrashkakanstantinass]

I am trying to optimize Table performance in our project. We don't use virtualization and the onBottomReached loads only 25 new items, but performance is sluggish. (slowdowns when new items are added, you can see same behavior with demo project that I linked). Scrolling gets stuck.

https://github.com/iTwin/iTwinUI/assets/115642938/451aa6f9-ec5a-4dcc-8b63-3ecad6d2fa5c https://github.com/iTwin/iTwinUI/assets/115642938/4c5fdbbc-ede2-4c96-a0f2-d71b01fd7f50

[piatrashkakanstantinass]

An update: I have tried running demo project without virtualization on another machine (m1 pro macbook, latest chrome) and performance impact is not as bad (even with 6x-20x cpu throttling). Firefox on any machine behaves properly as well. For comparison:

• Firefox performance: https://github.com/iTwin/iTwinUI/assets/115642938/43f4662f-8a40-4673-a4b4-3dd3a6447f99
• Chrome performance (Notice substantial slowdown at the end, scrolling is blocked when loading spinner appears): https://github.com/iTwin/iTwinUI/assets/115642938/e8e5353f-9824-4ab4-83be-6dfce4cb5665