[Bug]: Table scroll on split panel close about components

[connorlanigan]

Hello!

In your example, you are removing the split panel from the page when no item is selected. We recommend not to do that, and instead keep the Split panel always present. Users can open & close the split panel using the arrow icon in the corner. If you have a need for modifying the open/close state of the panel from your code, you can use the splitPanelOpen property on the AppLayout component.

You can see this in action in our "Split view" demo.

There is further documentation in the "Split view" article on our website with more recommendations (including e.g. "When nothing is selected, display the empty state").

[nicolaeClichici]

But is there any way to hide the split panel (without 0 selected instances view info) after user selects a record and deselects it ?

[connorlanigan]

It is technically possible, yes. You can conditionally render the split panel by passing undefined into the splitPanel slot if you don't want to render anything (<AppLayout splitPanel={myCondition ? <SplitPanel /> : undefined} />).
Note that in the code example you linked to, you are always passing a component into the splitPanel slot (namely the AppSplitPanel component), which causes the AppLayout to reserve that space on the screen and thus display the table scrollbar above the reserved space. Since your AppSplitPanel component sometimes internally renders nothing, this reserved space is then transparent, so the scrollbar appears to be floating. To not reserve this space, you'd have to move the condition outside of the AppSplitPanel component (as shown in the code above).

However, from a UX perspective, it could be confusing for your users if the split panel disappears sometimes, since there is no clear indication why the split panel is gone and what needs to be done to make it visible. Your users might get confused about the application ("Why is the panel missing - is the application broken? Did they remove that functionality?") or themselves ("Wasn't there a panel here last time I used this website? Am I on the wrong page?").
By always showing the split panel, your users can see that the element they're looking for is there, and they also see what they need to do so that they can use it, since the "0 instances selected" text implies that they should select an instance.

Thus, we recommend to always keep the split panel present (and your users can open/close it).

[nicolaeClichici]

Ok, thanks for explanation, but by setting the condition myCondition ? <SplitPanel /> : undefined at AppLayout level, it would re-render the entire AppLayout which is not desired.
Sure I can work around it, and apply the condition there, but isn't it a style bug on the component itself ?
I expect a component with render null not to show a visible scrollbar (that previously was rendered)

WDYT ?

[connorlanigan]

Currently, the AppLayout & SplitPanel components have been designed & implemented with the above-mentioned UX pattern in mind. Conditionally adding and removing the SplitPanel during the lifecycle of the AppLayout is neither intended nor supported, and we do not consider this a bug.

[just-boris]

Closing due to inactivity. Feel free to reopen if you have additional questions