Spaces:
Build error
Build error
File size: 2,458 Bytes
b59aa07 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 |
import React, { lazy, Suspense } from "react";
import { useLocation } from "react-router";
import { LoadingSpinner } from "../shared/loading-spinner";
// Lazy load all tab components
const EditorTab = lazy(() => import("#/routes/changes-tab"));
const BrowserTab = lazy(() => import("#/routes/browser-tab"));
const JupyterTab = lazy(() => import("#/routes/jupyter-tab"));
const ServedTab = lazy(() => import("#/routes/served-tab"));
const TerminalTab = lazy(() => import("#/routes/terminal-tab"));
const VSCodeTab = lazy(() => import("#/routes/vscode-tab"));
interface TabContentProps {
conversationPath: string;
}
export function TabContent({ conversationPath }: TabContentProps) {
const location = useLocation();
const currentPath = location.pathname;
// Determine which tab is active based on the current path
const isEditorActive = currentPath === conversationPath;
const isBrowserActive = currentPath === `${conversationPath}/browser`;
const isJupyterActive = currentPath === `${conversationPath}/jupyter`;
const isServedActive = currentPath === `${conversationPath}/served`;
const isTerminalActive = currentPath === `${conversationPath}/terminal`;
const isVSCodeActive = currentPath === `${conversationPath}/vscode`;
return (
<div className="h-full w-full relative">
{/* Each tab content is always loaded but only visible when active */}
<Suspense
fallback={
<div className="flex items-center justify-center h-full">
<LoadingSpinner size="large" />
</div>
}
>
<div
className={`absolute inset-0 ${isEditorActive ? "block" : "hidden"}`}
>
<EditorTab />
</div>
<div
className={`absolute inset-0 ${isBrowserActive ? "block" : "hidden"}`}
>
<BrowserTab />
</div>
<div
className={`absolute inset-0 ${isJupyterActive ? "block" : "hidden"}`}
>
<JupyterTab />
</div>
<div
className={`absolute inset-0 ${isServedActive ? "block" : "hidden"}`}
>
<ServedTab />
</div>
<div
className={`absolute inset-0 ${isTerminalActive ? "block" : "hidden"}`}
>
<TerminalTab />
</div>
<div
className={`absolute inset-0 ${isVSCodeActive ? "block" : "hidden"}`}
>
<VSCodeTab />
</div>
</Suspense>
</div>
);
}
|