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

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

@@ -1,19 +1,37 @@
 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 }) => {
-  <div
+  const [wasActivated, setWasActivated] = useState(false);
-    role="tabpanel"
+
-    id={`tabpanel-${tabId}`}
+  useEffect(() => {
-    aria-labelledby={`tab-${tabId}`}
+    if (active) {
-    {...props}
+      setWasActivated(true);
-    style={{ display: active ? "block" : "none" }}
+    }
-  >
+  }, [active]);
-    {children}
+
-  </div>
+  // 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}`}
+      aria-labelledby={`tab-${tabId}`}
+      {...props}
+      style={{ display: active ? "block" : "none" }}
+    >
+      {children}
+    </div>
+  );
+};
 
 TabPanel.propTypes = {
   /**