Optimize the rendering logic for the Collapse and Tabs child components(#101)

src/components/EditorSidePanel/Issues.jsx

@@ -27,7 +27,7 @@ export default function Issues() {
   }, [tables, relationships, issues, types]);
 
   return (
-    <Collapse style={{ width: "100%" }}>
+    <Collapse keepDOM lazyRender style={{ width: "100%" }}>
       <Collapse.Panel
         header={
           <Badge

src/components/EditorSidePanel/NotesTab/NotesTab.jsx

@@ -33,6 +33,8 @@ export default function NotesTab() {
       ) : (
         <Collapse
           activeKey={selectedElement.open ? `${selectedElement.id}` : ""}
+          keepDOM
+          lazyRender
           onChange={(activeKey) => {
             setSelectedElement((prev) => ({
               ...prev,

src/components/EditorSidePanel/RelationshipsTab/RelationshipsTab.jsx

@@ -19,6 +19,8 @@ export default function RelationshipsTab() {
             ? `${selectedElement.id}`
             : ""
         }
+        keepDOM
+        lazyRender
         onChange={(k) =>
           setSelectedElement((prev) => ({
             ...prev,

src/components/EditorSidePanel/SidePanel.jsx

@@ -1,4 +1,4 @@
-import { Tabs } from "@douyinfe/semi-ui";
+import { Tabs, TabPane } from "@douyinfe/semi-ui";
 import { Tab } from "../../data/constants";
 import { useLayout, useSelect } from "../../hooks";
 import RelationshipsTab from "./RelationshipsTab/RelationshipsTab";
@@ -13,19 +13,11 @@ export default function SidePanel({ width, resize, setResize }) {
   const { selectedElement, setSelectedElement } = useSelect();
 
   const tabList = [
-    { tab: "Tables", itemKey: Tab.TABLES },
+    { tab: "Tables", itemKey: Tab.TABLES, component: <TablesTab />  },
-    { tab: "Relationships", itemKey: Tab.RELATIONSHIPS },
+    { tab: "Relationships", itemKey: Tab.RELATIONSHIPS, component: <RelationshipsTab />  },
-    { tab: "Subject Areas", itemKey: Tab.AREAS },
+    { tab: "Subject Areas", itemKey: Tab.AREAS, component: <AreasTab />  },
-    { tab: "Notes", itemKey: Tab.NOTES },
+    { tab: "Notes", itemKey: Tab.NOTES, component: <NotesTab />  },
-    { tab: "Types", itemKey: Tab.TYPES },
+    { tab: "Types", itemKey: Tab.TYPES, component: <TypesTab />  },
-  ];
-
-  const contentList = [
-    <TablesTab key="tables" />,
-    <RelationshipsTab key="relationships" />,
-    <AreasTab key="areas" />,
-    <NotesTab key="notes" />,
-    <TypesTab key="types" />,
   ];
 
   return (
@@ -38,15 +30,19 @@ export default function SidePanel({ width, resize, setResize }) {
           <Tabs
             type="card"
             activeKey={selectedElement.currentTab}
-            tabList={tabList}
+            lazyRender
             onChange={(key) =>
               setSelectedElement((prev) => ({ ...prev, currentTab: key }))
             }
             collapsible
           >
+            {tabList.length && tabList.map(tab => 
+              <TabPane tab={tab.tab} itemKey={tab.itemKey} key={tab.itemKey}>
                 <div className="p-2">
-              {contentList[parseInt(selectedElement.currentTab) - 1]}
+                  {tab.component}
                 </div>
+              </TabPane>
+            )}
           </Tabs>
         </div>
         {layout.issues && (

src/components/EditorSidePanel/TablesTab/TableInfo.jsx

@@ -144,6 +144,8 @@ export default function TableInfo({ data }) {
         >
           <Collapse
             activeKey={indexActiveKey}
+            keepDOM
+            lazyRender
             onChange={(itemKey) => setIndexActiveKey(itemKey)}
             accordion
           >
@@ -169,7 +171,7 @@ export default function TableInfo({ data }) {
         style={{ marginTop: "12px", marginBottom: "12px" }}
         headerLine={false}
       >
-        <Collapse>
+        <Collapse keepDOM lazyRender>
           <Collapse.Panel header="Comment" itemKey="1">
             <TextArea
               field="comment"

src/components/EditorSidePanel/TablesTab/TablesTab.jsx

@@ -31,6 +31,8 @@ export default function TablesTab() {
               ? `${selectedElement.id}`
               : ""
           }
+          keepDOM
+          lazyRender
           onChange={(k) =>
             setSelectedElement((prev) => ({
               ...prev,

src/components/EditorSidePanel/TypesTab/TypeInfo.jsx

@@ -64,7 +64,7 @@ export default function TypeInfo({ index, data }) {
           style={{ marginTop: "12px", marginBottom: "12px" }}
           headerLine={false}
         >
-          <Collapse>
+          <Collapse keepDOM lazyRender>
             <Collapse.Panel header="Comment" itemKey="1">
               <TextArea
                 field="comment"

src/components/EditorSidePanel/TypesTab/TypesTab.jsx

@@ -60,6 +60,8 @@ export default function TypesTab() {
               ? `${selectedElement.id}`
               : ""
           }
+          keepDOM
+          lazyRender
           onChange={(id) =>
             setSelectedElement((prev) => ({
               ...prev,