From e3fe7c60c2526cf6a044c475460d0a6b05a23dfa Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Micha=C5=82=20Leszczyk?= <michasko37@gmail.com>
Date: Wed, 2 Mar 2022 11:59:00 +0100
Subject: [PATCH] fix(dashboard-v2): only render TabPanel's children when the
 panel is first activated

---
 .../src/components/Tabs/TabPanel.js           | 40 ++++++++++++++-----
 1 file changed, 29 insertions(+), 11 deletions(-)

diff --git a/packages/dashboard-v2/src/components/Tabs/TabPanel.js b/packages/dashboard-v2/src/components/Tabs/TabPanel.js
index 46307431..f9907074 100644
--- a/packages/dashboard-v2/src/components/Tabs/TabPanel.js
+++ b/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 }) => (
-  <div
-    role="tabpanel"
-    id={`tabpanel-${tabId}`}
-    aria-labelledby={`tab-${tabId}`}
-    {...props}
-    style={{ display: active ? "block" : "none" }}
-  >
-    {children}
-  </div>
-);
+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}`}
+      aria-labelledby={`tab-${tabId}`}
+      {...props}
+      style={{ display: active ? "block" : "none" }}
+    >
+      {children}
+    </div>
+  );
+};
 
 TabPanel.propTypes = {
   /**