optimized switching between tabs

packages/web/src/TabContent.js

@@ -5,7 +5,7 @@ import tabs from './tabs';
 import { useOpenedTabs } from './utility/globalState';
 import ErrorBoundary from './utility/ErrorBoundary';
 
-const TabContainer = styled.div`
+const TabContainerStyled = styled.div`
   position: absolute;
   left: 0;
   top: 0;
@@ -17,6 +17,20 @@ const TabContainer = styled.div`
     props.tabVisible ? 'visible' : 'hidden'};
 `;
 
+function TabContainer({ TabComponent, ...props }) {
+  const { tabVisible, tabid, toolbarPortalRef } = props;
+  return (
+    // @ts-ignore
+    <TabContainerStyled tabVisible={tabVisible}>
+      <ErrorBoundary>
+        <TabComponent {...props} tabid={tabid} tabVisible={tabVisible} toolbarPortalRef={toolbarPortalRef} />
+      </ErrorBoundary>
+    </TabContainerStyled>
+  );
+}
+
+const TabContainerMemo = React.memo(TabContainer);
+
 function createTabComponent(selectedTab) {
   const TabComponent = tabs[selectedTab.tabComponent];
   if (TabComponent) {
@@ -60,12 +74,14 @@ export default function TabContent({ toolbarPortalRef }) {
     const { TabComponent, props } = mountedTabs[tabid];
     const tabVisible = tabid == (selectedTab && selectedTab.tabid);
     return (
-      // @ts-ignore
+      <TabContainerMemo
-      <TabContainer key={tabid} tabVisible={tabVisible}>
+        key={tabid}
-        <ErrorBoundary>
+        {...props}
-          <TabComponent {...props} tabid={tabid} tabVisible={tabVisible} toolbarPortalRef={toolbarPortalRef} />
+        tabid={tabid}
-        </ErrorBoundary>
+        tabVisible={tabVisible}
-      </TabContainer>
+        toolbarPortalRef={toolbarPortalRef}
+        TabComponent={TabComponent}
+      />
     );
   });
 }