[collapsible] SupportkeepMounted prop

[mj12albert]

Follow up to #577 (review)

Do we have an API to not mount the children of an accordion? Something similar to https://mui.com/material-ui/react-accordion/#performance. When rendering heavy components under an accordion, e.g. in a dashboard: charts, data grid, etc. It can be a lifesaver for the performance responsiveness on the page.

Or is the idea to solve this problem with a new component of this kind: https://ark-ui.com/react/docs/utilities/presence?

[colmtuite]

This seems back-to-front to me. Wouldn't it be better—and more in-line with our other components—if the panel contents unmounted by default, and then you can use the keepMounted prop if you need it?

cc @michaldudak

[michaldudak]

I'd name the prop keepMounted for sure. As for its default value, I don't have a strong opinion, but I lean towards making it consistent with other components (so false).

[mj12albert]

@colmtuite I agree with naming this as keepMounted instead

I think it makes sense for the default for this to be true, because generally browsers implement the behavior of the hidden attribute with CSS display: none, which doesn't remove the Panel (and contents) from the DOM

And for other components, keepMounted is needed for animations using Framer; while for Collapsible, it would be for performance, e.g. if you have a lot of Collapsibles with heavy components in the Panel as @oliviertassinari mentioned, what do you think?