Fix slow tab switching by keeping all tab components mounted

Author: charlesvien

apps/twig/src/renderer/features/panels/components/TabbedPanel.tsx

@@ -79,8 +79,6 @@ export const TabbedPanel: React.FC<TabbedPanelProps> = ({
   rightContent,
   emptyState,
 }) => {
-  const activeTab = content.tabs.find((tab) => tab.id === content.activeTabId);
-
   const handleSplitClick = async () => {
     const result = await trpcVanilla.contextMenu.showSplitContextMenu.mutate();
     if (result.direction) {
@@ -246,8 +244,19 @@ export const TabbedPanel: React.FC<TabbedPanelProps> = ({
         position="relative"
         onClick={() => onPanelFocus?.(panelId)}
       >
-        {activeTab ? (
-          activeTab.component
+        {content.tabs.length > 0 ? (
+          content.tabs.map((tab) => (
+            <div
+              key={tab.id}
+              style={
+                tab.id === content.activeTabId
+                  ? { height: "100%" }
+                  : { display: "none" }
+              }
+            >
+              {tab.component}
+            </div>
+          ))
         ) : emptyState ? (
           emptyState
         ) : (