setupTab loading spinner

apps/desktop/src/renderer/screens/main/components/WorkspaceView/ContentView/TabsContent/index.tsx

@@ -1,12 +1,13 @@
 import { useMemo } from "react";
 import { trpc } from "renderer/lib/trpc";
+import type { SetupTab } from "renderer/stores";
 import { TabType, useActiveTabIds, useTabs } from "renderer/stores";
 import { DropOverlay } from "./DropOverlay";
 import { EmptyTabView } from "./EmptyTabView";
 import { GroupTabView } from "./GroupTabView";
+import { SetupTabView } from "./SetupTabView";
 import { SingleTabView } from "./SingleTabView";
 import { useTabContentDrop } from "./useTabContentDrop";
-import { SetupTabView } from "./SetupTabView";
 
 export function TabsContent() {
 	const { data: activeWorkspace } = trpc.workspaces.getActive.useQuery();
@@ -30,19 +31,42 @@ export function TabsContent() {
 		return activeTab;
 	}, [activeWorkspaceId, activeTabIds, allTabs]);
 
+	// Get all setup tabs to keep them mounted (so they can complete and auto-close)
+	const setupTabs = useMemo(() => {
+		if (!activeWorkspaceId) return [];
+		return allTabs.filter(
+			(tab): tab is SetupTab =>
+				tab.type === TabType.Setup && tab.workspaceId === activeWorkspaceId,
+		);
+	}, [allTabs, activeWorkspaceId]);
+
 	const { isDropZone, attachDrop } = useTabContentDrop(tabToRender);
 
 	if (!tabToRender) {
 		return (
 			<div ref={attachDrop} className="flex-1 h-full">
 				<EmptyTabView />
+				{/* Keep setup tabs mounted so they can complete and auto-close */}
+				{setupTabs.map((tab) => (
+					<div key={tab.id} className="hidden">
+						<SetupTabView tab={tab} />
+					</div>
+				))}
 			</div>
 		);
 	}
 
 	return (
 		<div ref={attachDrop} className="flex-1 h-full relative">
-			{tabToRender.type === TabType.Setup && <SetupTabView tab={tabToRender} />}
+			{/* Keep all setup tabs mounted (hidden when not active) so they can complete and auto-close */}
+			{setupTabs.map((tab) => (
+				<div
+					key={tab.id}
+					className={tabToRender.id === tab.id ? "h-full w-full" : "hidden"}
+				>
+					<SetupTabView tab={tab} />
+				</div>
+			))}
 			{tabToRender.type === TabType.Single && (
 				<SingleTabView tab={tabToRender} isDropZone={isDropZone} />
 			)}

apps/desktop/src/renderer/screens/main/components/WorkspaceView/Sidebar/TabsView/TabItem/index.tsx

@@ -1,5 +1,6 @@
 import { Button } from "@superset/ui/button";
 import { useState } from "react";
+import { CgSpinner } from "react-icons/cg";
 import { HiChevronRight, HiMiniXMark } from "react-icons/hi2";
 import { trpc } from "renderer/lib/trpc";
 import {
@@ -82,6 +83,7 @@ export function TabItem({ tab, childTabs = [] }: TabItemProps) {
 	};
 
 	const isGroupTab = tab.type === TabType.Group;
+	const isSetupTab = tab.type === TabType.Setup;
 	const hasChildren = childTabs.length > 0;
 
 	return (
@@ -137,6 +139,9 @@ export function TabItem({ tab, childTabs = [] }: TabItemProps) {
 								/>
 							</div>
 						)}
+						{isSetupTab && (
+							<CgSpinner className="size-4 shrink-0 animate-spin mr-1" />
+						)}
 						{rename.isRenaming ? (
 							<input
 								ref={rename.inputRef}