[Tabs] Tabs get mounted when they are inactive

Hi there! First of all I would like to thank you for this fantastic library. It’s really impressive!

Expected Behavior

The Tabs component only mounts the contents of a TabPanel to the DOM when the tab is activated/clicked/selected.

Link to minimal reproduction https://codesandbox.io/s/chakra-tabs-mounting-early-kcign

Steps to Reproduce

1. Open the codesandbox
2. Open the console view
3. See console logs from both tabs, although we only ever activated the first one

Suggested solution(s)

Instead of using display: none to hide the DOM elements, there should also be an option to not mount the DOM elements at all until the tab is activated.

Desktop (please complete the following information):

• OS: MacOS 10.15.5
• Browser: Chromium
• Version: 84.0.4132.0

Additional context

I’m currently using the Tabs component in an application where every tab fetches a lot of data. The fact that the Tabs component renders all tabs to the DOM and thereby fires lots of HTTP requests simultaneously is causing performance issues. I have tried to use the isManual option, but the tabs still get rendered to the DOM.

[dmitru]

This issue is similar in spirit to this other one with Menu and Popovers rendering their content while closed: https://github.com/chakra-ui/chakra-ui/issues/1118

For the maintainers: this seems to be a desirable pattern – allow to opt out from rendering stuff until necessary, for performance reasons.

[ljosberinn]

hey @nielsdB97, we’re currently looking into this and wanted to let you know you technically have a minor flaw in there: your sandbox returns one large tree, which will get transpiled to react elements. console.log gets executed during this process. The TabPanel can only begin controlling its children after.

However, the issue persists even when separating TabPanels into separate components, so it was not for naught and we’re fixing it 😃

https://codesandbox.io/s/chakra-tabs-mounting-early-forked-f60l4?file=/src/index.js