Drawer should not render contents unless expanded

Describe the issue. What is the expected and unexpected behavior? The contents of a Drawer are rendered regardless of whether the drawer is opened or closed. There should at least be an option for the drawer to not render the panel contents when collapsed. But TBH I’m not sure what use case you would ever need the contents present unless the drawer is expanded. The reason for not rendering the contents is because they could be expensive to render and / or be network chatty. This is unnecessary if the contents are not visible to the user.

A workaround is to conditionally render the panelContents if the drawer is expanded or not. However this has a side effect of losing the animation. The Drawer component should render the content immediately before opening and perform the open animation. On collapsed, the Drawer should animate closed and then unmount the contents.

Please provide the steps to reproduce. Feel free to link CodeSandbox or another tool.

See patternfly react documentation samples: https://patternfly-react.surge.sh/documentation/react/components/drawer

Is this a bug or enhancement? If this issue is a bug, is this issue blocking you or is there a work-around? I see this as a Bug because the workaround loses the animation.

What is your product and what release version are you targeting? OpenShift 4.6

[redallen]

@seanforyou23 Yes we’ll have different approaches, but this isn’t the first time we conditionally render in React components that are hidden behind visible or hidden CSS in Core. It’d be nice if Core could conditionally hide components without having to write a new example each time. Perhaps a templating system other than handlebars could help, but that’s a separate issue.

[seanforyou23]

I get it, just doing my part to try and keep the implementations aligned where possible. Just because it’s something we’re doing currently doesn’t necessarily mean it’s the best strategy. If a consumer is using another framework, let’s say Angular, and they want to implement Drawer, keep in mind the current recommendation is to reference core to see what the markup strategy should be. If users do this, they’d be following down a similar road where they’ll be met with these same issues. If we adjusted core to reflect what we plan to do in React, other JS implementations could also reference the same core examples without re-creating this same issue regarding unnecessary renders which could be expensive. Just food for thought!