[AnalyticalTable]: There will be empty line or overlapped rows when lazy render rows with subcomponent

Describe the bug

We implemented a tree table using AnalyticalTable in which the children nodes are paginated loaded from server when expanding a row, in our implementation we will render a "Load more" button as a subcomponent to load paginated children. But we found that in some cases, there will be empty row which are not expected, and in other cases the sub component will be overlapped by the row.

I'm not sure in which case the bug can be reproduced, because how to reproduce it is related to the structure of the tree, different trees may need different steps. in my example below I found a specific actions sequence to reproduce the bug, but there may exist other actions sequences. And if we change the tree structure, for example in our reality project with real data, we need to found different actions sequence to reproduce it. But once we found a specific actions sequence we can reproduce it stably.

In the empty row scenario, the extra blank space has an exactly height of the subcomponent. And in both of the 2 kinds of scenarios, if we expand any other nodes or click any other Load more buttons, the tree can go back to normal. So it seems that in certain cases the height of some rows are not calculated correctly.

Isolated Example

https://codesandbox.io/p/devbox/proud-field-tsg95m?file=%2Fsrc%2FApp.jsx%3A21%2C1

Reproduction steps

You can follow the steps below or reference to the video.

NOTES: the node names are randomly generated except the 2 root nodes, but if you follow the clicking action sequence, you can reproduce the bug.

[Scenario 1] The empty row reproduction steps:

expand the root1 node
click the Load more for root1 button to load children node for root1
click the Load more for root1 button again
expand the first child node of root1
click the "Load more {node name}" button, the {node name} is the name of node expanded in step 4.
now you will notice there is an empty row in the table. And you can also find the container is scrollable.

Because the root2 has the same structure with root1, so if you replace root1 with root2 in the above steps and finish the rest steps, you will get another empty row.

[Scenario 2] The overlapped rows reproduction steps(this scenario is a little complicated described by text, the video may be a better example):

expand the root1 node
click the Load more for root1 button to load children node for root1
expand the first child node of root1
click the "Load more {node name}" button, the {node name} is the name of node expanded in step 3.
expand the first child node of the node expanded in step 3
now you will notice there is a Load more button overlapped by a row. And you can also find there is an extra empty row at the bottom of the table.

And also in this scenario, if you replace root1 with root2, you will get another overlapped Load more button.

Expected Behaviour

No any empty or overlapped rows.

Screenshots or Videos

NOTES: the node names are randomly generated, so when you run the example you will get different node names from those in the video, but if you follow the clicking actions sequence in the video, you can get the same result.

[Scenario 1] The empty row reproduction steps:

https://github.com/SAP/ui5-webcomponents-react/assets/5129504/1f3b6d3a-ae0e-4401-af98-f048fb1a0c88

[Scenario 2] The overlapped rows reproduction steps:

https://github.com/SAP/ui5-webcomponents-react/assets/5129504/c5989535-bb3c-4ab8-9ded-7feae41e03a3

UI5 Web Components for React Version

^18.2.0

UI5 Web Components Version

~1.23.3

Browser

Chrome, Firefox, Safari

Operating System

No response

Additional Context

No response

Relevant log output

No response

Declaration

[X] I’m not disclosing any internal or sensitive information.

SAP / ui5-webcomponents-react