[AnalyticalTable]: [subComponent - problem with scroll position and performance]

[Qcyk]

Describe the bug

Hi, I would like to describe two issues that I found in AnalyticalTable component with its subcomponent.

1. If I expand the subcomponent and then collapse it, the scroll height connected to the table is not change to previous height.
2. subcomponent is called a lot of times when calling any event on the table, (select - unselect row, click on row, change column width, collapse subcomponent, etc.) I added console.log to the sample code which you can find in the codespanbox (link below). Click F12 and do some action on table and you will see how many times subcomponent is executed causing the performance problem.

Subcomponent functionality is really useful, but unfortunately the performance is not so good :(

Isolated Example

https://codesandbox.io/p/sandbox/funny-sutherland-s8q78l?file=%2Fsrc%2FApp.tsx%3A14%2C74

Reproduction steps

1. Run codesandbox with sample code

...

Expected Behaviour

fix scroll height and performance issue.

Screenshots or Videos

No response

UI5 Web Components for React Version

1.21.1

UI5 Web Components Version

1.18.0

Browser

Chrome, Edge, Firefox

Operating System

No response

Additional Context

No response

Relevant log output

No response

Declaration

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

[Qcyk]

Have you had a chance to look into this issue?

[Qcyk]

@MarcusNotheis Could you take a look on this issue and let me know if you have a plan to solve the issue with subcomponent?
Thanks!

[Lukas742]

Hi @Qcyk

1. the linked PR will add a check that is executed on each scroll and updates the respective heights if they're different from each other. I tried some other things, but realized that this is the most performant way I could find.
2. The function is executed, but the subcomponents are only rendered when expanded. I also noticed that there are a few things that could be improved in your codeSandbox. I've refactored your example a bit and added some comments to give more context. Please take a look at it and let me know if something isn't clear.

https://codesandbox.io/p/devbox/empty-shadow-qv46mk?file=%2Fsrc%2FApp.tsx

[ui5-webcomponents-react-bot]

🎉 This issue has been resolved in version v1.24.0 🎉

The release is available on v1.24.0

Your semantic-release bot 📦🚀

[Qcyk]

Hi @Qcyk

1. the linked PR will add a check that is executed on each scroll and updates the respective heights if they're different from each other. I tried some other things, but realized that this is the most performant way I could find.
2. The function is executed, but the subcomponents are only rendered when expanded. I also noticed that there are a few things that could be improved in your codeSandbox. I've refactored your example a bit and added some comments to give more context. Please take a look at it and let me know if something isn't clear.

https://codesandbox.io/p/devbox/empty-shadow-qv46mk?file=%2Fsrc%2FApp.tsx

Hi Lukas,

Thanks for your help with MEMO it works better, but there is still problem with scroll position and heigh.
I updated library to the newest version and the scroll still has incorrect heigh.
Please look at the example:
https://codesandbox.io/p/devbox/amazing-farrell-rnrfsh?file=%2Fpackage.json%3A17%2C27

[Lukas742]

I think your codeSandbox hasn't updated its deps yet. Maybe it's because of the two lock-files.
I've removed the yarn.lock and ran npm i and now it's working for me: https://codesandbox.io/p/devbox/cranky-bas-r9y7hz?file=%2Fsrc%2FApp.tsx%3A13%2C27