[AnalyticalTable]: [Sluggish scrolling in v2]

[sdommel]

Describe the bug

We are upgrading to v2 and noticed an overall slowdown in the performance of the AnalyticalTable component compared to v1, especially when scrolling.
Performance obviously has to do with the number or rows, columns, cell renderer and so on, but in almost all cases the same tables in v1 behave more performant than in v2.

This is also observable in the docs:
https://sap.github.io/ui5-webcomponents-react/v1/?path=/docs/data-display-analyticaltable--docs
https://sap.github.io/ui5-webcomponents-react/v2/?path=/docs/data-display-analyticaltable--docs

While this is a big table, scrolling is still significantly worse in v2.

Isolated Example

No response

Reproduction steps

Compare scrolling behaviour of the same AnalyticalTable between v1 and v2 by dragging the scrollbar down with the mouse pressed.

Expected Behaviour

Same performance between same tables in v2 compared to v1

Screenshots or Videos

No response

UI5 Web Components for React Version

2.4.0

UI5 Web Components Version

2.4.0

Browser

Chrome

Operating System

Windows

Additional Context

No response

Relevant log output

No response

Organization

No response

Declaration

• I’m not disclosing any internal or sensitive information.

[azhu716]

We have observed the same issue in our project. We found that this function getStyleStoreSymbol is using a significant amount of time:

And this performance issue is not specific to the AnalyticalTable but it is the most influenced as it will render a huge amount of components. Everything on the same page will become extremely slow.

Edit: Our observation is not the same as the demo page. On the demo page, it seems the time is mainly spend on layout and Chrome suggests that it's a forced reflow issue.

Unfortunately it's difficult to create a stackblitz for the performance issue we encountered... Please fix the performance issue on the demo page and I'll try to reproduce the issue with getStyleStoreSymbol.

[Lukas742]

Hi @azhu716 & @sdommel,

With our next release, the performance of the docs view (overview) for the AnalyticalTable will be improved by rendering only the "Default" example initially. Additionally, the default example will then reflect the table's default props only (data and columns).

Regarding performance, we identified and fixed a memory leak in our StyleStore that affected the AnalyticalTable. A fix will be released next week at the latest.

We are still exploring ways to further improve performance. A major challenge is syncing the scroll behavior of two containers to ensure the scrollbar is always visible. Our current approach is suboptimal, but even after refactoring, I couldn't find a satisfactory solution. Syncing scrollTop between two containers inherently relies on JavaScript, which impacts performance. Do you have any ideas for a better approach?

Additionally, we plan to refactor the table to use a single stylesheet, avoiding calls to useStyleSheet deep within the component. This might provide a slight performance boost as well.