fix(dashboard-v2): only render TabPanel's children when the panel is first activated

packages/dashboard-v2/src/components/Tabs/TabPanel.js

@@ -1,9 +1,26 @@
 import PropTypes from "prop-types";
+import { useEffect, useState } from "react";
 
 /**
  * Besides documented props, it accepts all HMTL attributes a `<div>` element does.
  */
-export const TabPanel = ({ children, active, tabId, ...props }) => (
+export const TabPanel = ({ children, active, tabId, ...props }) => {
+  const [wasActivated, setWasActivated] = useState(false);
+
+  useEffect(() => {
+    if (active) {
+      setWasActivated(true);
+    }
+  }, [active]);
+
+  // If the TabPanel was never activated, let's not render its children at all.
+  // We'll only render them after the first activation and then won't unmount them
+  // unless the entire TabPanel is unmounted, too.
+  if (!active && !wasActivated) {
+    return null;
+  }
+
+  return (
     <div
       role="tabpanel"
       id={`tabpanel-${tabId}`}
@@ -14,6 +31,7 @@ export const TabPanel = ({ children, active, tabId, ...props }) => (
       {children}
     </div>
   );
+};
 
 TabPanel.propTypes = {
   /**