perf(desktop): stop hidden right-pane and background work on every git change

apps/desktop/src/lib/trpc/routers/viewer-github/index.test.ts

@@ -27,6 +27,28 @@ describe("viewer GitHub on this machine", () => {
 		).rejects.toMatchObject({ code: "PRECONDITION_FAILED" });
 	});
 
+	test("a missing login is looked up once per window, not on every poll", async () => {
+		let lookups = 0;
+		let clock = 0;
+		const router = createViewerGithubRouter(
+			{
+				getToken: async () => {
+					lookups++;
+					return null;
+				},
+			},
+			() => ({}) as Octokit,
+			() => clock,
+		);
+		const call = router.createCaller({} as never);
+		for (let poll = 0; poll < 5; poll++) await call.status();
+		expect(lookups).toBe(1);
+
+		clock += 60_000;
+		await call.status();
+		expect(lookups).toBe(2);
+	});
+
 	test("acts with the local token and passes GitHub's refusal on as its code", async () => {
 		const { call, tokensUsed } = caller("local-token", {
 			request: (async () => {

apps/desktop/src/lib/trpc/routers/viewer-github/index.ts

@@ -14,6 +14,7 @@ const pullRequestInput = z.object({
 	number: z.number().int().positive(),
 });
 const body = z.string().trim().min(1).max(65536);
+const MISSING_LOGIN_TTL_MS = 30_000;
 
 /**
  * Pull requests as the person at this machine, with their own GitHub login
@@ -28,7 +29,19 @@ export function createViewerGithubRouter(
 	> = new LocalGitCredentialProvider(),
 	clientFor: (token: string) => Octokit = (token) =>
 		new Octokit({ auth: token }),
+	now: () => number = () => performance.now(),
 ) {
+	// Each miss spawns `git credential fill` and `gh auth token`, and PR panes
+	// ask on every poll.
+	let missingSince: number | null = null;
+	async function isAvailable(): Promise<boolean> {
+		if (missingSince !== null && now() - missingSince < MISSING_LOGIN_TTL_MS)
+			return false;
+		const available = Boolean(await credentials.getToken("github.com"));
+		missingSince = available ? null : now();
+		return available;
+	}
+
 	async function onGithub<T>(
 		input: z.infer<typeof pullRequestInput>,
 		fallback: string,
@@ -65,7 +78,7 @@ export function createViewerGithubRouter(
 
 	return router({
 		status: publicProcedure.query(async () => ({
-			available: Boolean(await credentials.getToken("github.com")),
+			available: await isAvailable(),
 		})),
 
 		getPullRequestDetail: publicProcedure

apps/desktop/src/renderer/providers/ElectronTRPCProvider/ElectronTRPCProvider.tsx

@@ -83,6 +83,9 @@ const persister = createAsyncStoragePersister({
 		},
 	},
 	key: "superset-rq-cache",
+	// Every cache event re-serializes the whole persisted set on the main
+	// thread, including events from queries that are never persisted.
+	throttleTime: 10_000,
 	// Query data carries Dates (tRPC's superjson transformer); plain JSON would
 	// restore them as strings.
 	serialize: superjson.stringify,

apps/desktop/src/renderer/routes/_authenticated/_dashboard/v2-workspace/$workspaceId/components/SidebarSlide/SidebarSlide.test.tsx

@@ -7,6 +7,15 @@ import type { SidebarSlideMode } from "./SidebarSlide";
 
 const { act, cleanup, render } = await import("@testing-library/react");
 const { SidebarSlide } = await import("./SidebarSlide");
+const { useIsTabVisible } = await import("@superset/panes");
+
+function Panel() {
+	return (
+		<div data-testid="panel" data-visible={String(useIsTabVisible())}>
+			panel
+		</div>
+	);
+}
 
 afterEach(cleanup);
 
@@ -24,7 +33,7 @@ function renderSlide(mode: SidebarSlideMode, keepMounted = false) {
 		>
 			{(fill) => {
 				fills.push(fill);
-				return <div data-testid="panel">panel</div>;
+				return <Panel />;
 			}}
 		</SidebarSlide>
 	);
@@ -86,10 +95,12 @@ describe("SidebarSlide", () => {
 		expect(slide.panel()).toBe(node);
 		expect(content?.hasAttribute("inert")).toBe(true);
 		expect(content?.className).toContain("invisible");
+		expect(node?.dataset.visible).toBe("false");
 		slide.setMode("open");
 		await settle();
 		expect(slide.panel()).toBe(node);
 		expect(content?.hasAttribute("inert")).toBe(false);
+		expect(node?.dataset.visible).toBe("true");
 	});
 
 	test("settles on the last mode when toggled mid-move", async () => {

apps/desktop/src/renderer/routes/_authenticated/_dashboard/v2-workspace/$workspaceId/components/SidebarSlide/SidebarSlide.tsx

@@ -1,3 +1,4 @@
+import { TabVisibilityContext } from "@superset/panes";
 import { cn } from "@superset/ui/utils";
 import { useEffect, useRef, useState } from "react";
 
@@ -111,7 +112,9 @@ export function SidebarSlide({
 						contain: move ? "strict" : undefined,
 					}}
 				>
-					{children(fill)}
+					<TabVisibilityContext.Provider value={!hidden}>
+						{children(fill)}
+					</TabVisibilityContext.Provider>
 				</div>
 			</div>
 		</div>

apps/desktop/src/renderer/routes/_authenticated/_dashboard/v2-workspace/$workspaceId/components/WorkspaceSidebar/hooks/useChangesTab/components/BaseBranchSelector/BaseBranchSelector.tsx

@@ -1,13 +1,8 @@
-import { Trans, useLingui } from "@lingui/react/macro";
-import type { AppRouter } from "@superset/host-service";
 import { Popover, PopoverContent, PopoverTrigger } from "@superset/ui/popover";
-import { ScrollArea } from "@superset/ui/scroll-area";
-import type { inferRouterOutputs } from "@trpc/server";
-import { Check, ChevronDown } from "lucide-react";
-import { useMemo, useState } from "react";
-
-type Branch =
-	inferRouterOutputs<AppRouter>["git"]["listBranches"]["branches"][number];
+import { ChevronDown } from "lucide-react";
+import { useState } from "react";
+import type { Branch } from "../../types";
+import { BranchList } from "./components/BranchList";
 
 interface BaseBranchSelectorProps {
 	branches: Branch[];
@@ -20,15 +15,7 @@ export function BaseBranchSelector({
 	currentValue,
 	onChange,
 }: BaseBranchSelectorProps) {
-	const { t } = useLingui();
 	const [open, setOpen] = useState(false);
-	const [search, setSearch] = useState("");
-
-	const filtered = useMemo(() => {
-		if (!search) return branches;
-		const lower = search.toLowerCase();
-		return branches.filter((b) => b.name.toLowerCase().includes(lower));
-	}, [branches, search]);
 
 	return (
 		<Popover open={open} onOpenChange={setOpen}>
@@ -49,42 +36,14 @@ export function BaseBranchSelector({
 				className="flex w-64 max-h-96 flex-col p-0 overflow-hidden"
 				align="start"
 			>
-				<div className="border-b px-3 py-2">
-					<input
-						placeholder={t({
-							message: "Search branches...",
-						})}
-						value={search}
-						onChange={(e) => setSearch(e.target.value)}
-						className="w-full bg-transparent text-sm outline-none placeholder:text-muted-foreground"
-					/>
-				</div>
-				<ScrollArea className="flex-1 overflow-y-auto">
-					<div className="p-1">
-						{filtered.map((branch) => (
-							<button
-								key={branch.name}
-								type="button"
-								className="flex w-full items-center justify-between rounded-sm px-2 py-1.5 text-sm hover:bg-accent"
-								onClick={() => {
-									onChange(branch.name);
-									setOpen(false);
-									setSearch("");
-								}}
-							>
-								<span className="truncate">{branch.name}</span>
-								{branch.name === currentValue && (
-									<Check className="size-3.5 shrink-0" />
-								)}
-							</button>
-						))}
-						{filtered.length === 0 && (
-							<div className="px-2 py-3 text-center text-sm text-muted-foreground">
-								<Trans>No branches found</Trans>
-							</div>
-						)}
-					</div>
-				</ScrollArea>
+				<BranchList
+					branches={branches}
+					currentValue={currentValue}
+					onPick={(branchName) => {
+						onChange(branchName);
+						setOpen(false);
+					}}
+				/>
 			</PopoverContent>
 		</Popover>
 	);

apps/desktop/src/renderer/routes/_authenticated/_dashboard/v2-workspace/$workspaceId/components/WorkspaceSidebar/hooks/useChangesTab/components/BaseBranchSelector/components/BranchList/BranchList.tsx

@@ -0,0 +1,63 @@
+import { Trans, useLingui } from "@lingui/react/macro";
+import { ScrollArea } from "@superset/ui/scroll-area";
+import { Check } from "lucide-react";
+import { useMemo, useState } from "react";
+import type { Branch } from "../../../../types";
+
+interface BranchListProps {
+	branches: Branch[];
+	currentValue: string;
+	onPick: (branchName: string) => void;
+}
+
+export function BranchList({
+	branches,
+	currentValue,
+	onPick,
+}: BranchListProps) {
+	const { t } = useLingui();
+	const [search, setSearch] = useState("");
+
+	const filtered = useMemo(() => {
+		if (!search) return branches;
+		const lower = search.toLowerCase();
+		return branches.filter((b) => b.name.toLowerCase().includes(lower));
+	}, [branches, search]);
+
+	return (
+		<>
+			<div className="border-b px-3 py-2">
+				<input
+					placeholder={t({
+						message: "Search branches...",
+					})}
+					value={search}
+					onChange={(e) => setSearch(e.target.value)}
+					className="w-full bg-transparent text-sm outline-none placeholder:text-muted-foreground"
+				/>
+			</div>
+			<ScrollArea className="flex-1 overflow-y-auto">
+				<div className="p-1">
+					{filtered.map((branch) => (
+						<button
+							key={branch.name}
+							type="button"
+							className="flex w-full items-center justify-between rounded-sm px-2 py-1.5 text-sm hover:bg-accent"
+							onClick={() => onPick(branch.name)}
+						>
+							<span className="truncate">{branch.name}</span>
+							{branch.name === currentValue && (
+								<Check className="size-3.5 shrink-0" />
+							)}
+						</button>
+					))}
+					{filtered.length === 0 && (
+						<div className="px-2 py-3 text-center text-sm text-muted-foreground">
+							<Trans>No branches found</Trans>
+						</div>
+					)}
+				</div>
+			</ScrollArea>
+		</>
+	);
+}

apps/desktop/src/renderer/routes/_authenticated/_dashboard/v2-workspace/$workspaceId/components/WorkspaceSidebar/hooks/useChangesTab/components/BaseBranchSelector/components/BranchList/index.ts

@@ -0,0 +1 @@
+export { BranchList } from "./BranchList";

packages/panes/package.json

@@ -25,7 +25,9 @@
 		"@superset/typescript": "workspace:*",
 		"@types/bun": "1.4.3",
 		"@types/react": "19.3.0",
+		"@types/react-dom": "19.2.3",
 		"react": "19.3.0",
+		"react-dom": "19.3.0",
 		"typescript": "7.0.2"
 	},
 	"peerDependencies": {

packages/panes/src/index.ts

@@ -41,6 +41,7 @@ export type {
 } from "./react";
 export {
 	resolveTabTitle,
+	TabVisibilityContext,
 	useIsTabVisible,
 	usePaneFocus,
 	useTabTitle,

packages/panes/src/react/components/Workspace/components/KeptTab/KeptTab.tsx

@@ -4,8 +4,8 @@ import {
 	memo,
 	useDeferredValue,
 } from "react";
-import { TabVisibilityContext } from "../../../../hooks/useIsTabVisible";
 import { Tab } from "../Tab";
+import { TabVisibilityScope } from "./components/TabVisibilityScope";
 
 // Unlike display:none, this keeps the hidden tab's layout, so its resize
 // observers see no 0-size and its scroll offsets survive.
@@ -30,9 +30,9 @@ function KeptTabView<TData>({ isVisible, ...tabProps }: KeptTabProps<TData>) {
 			inert={!isVisible}
 			aria-hidden={isVisible ? undefined : true}
 		>
-			<TabVisibilityContext.Provider value={isPaneVisible}>
+			<TabVisibilityScope visible={isPaneVisible}>
 				<MemoTab {...tabProps} />
-			</TabVisibilityContext.Provider>
+			</TabVisibilityScope>
 		</div>
 	);
 }

packages/panes/src/react/components/Workspace/components/KeptTab/components/TabVisibilityScope/TabVisibilityScope.test.tsx

@@ -0,0 +1,33 @@
+import { describe, expect, test } from "bun:test";
+import { renderToStaticMarkup } from "react-dom/server";
+import {
+	TabVisibilityContext,
+	useIsTabVisible,
+} from "../../../../../../hooks/useIsTabVisible";
+import { TabVisibilityScope } from "./TabVisibilityScope";
+
+function Probe() {
+	return <i>{String(useIsTabVisible())}</i>;
+}
+
+function seenBy(parentVisible: boolean, tabVisible: boolean) {
+	return renderToStaticMarkup(
+		<TabVisibilityContext.Provider value={parentVisible}>
+			<TabVisibilityScope visible={tabVisible}>
+				<Probe />
+			</TabVisibilityScope>
+		</TabVisibilityContext.Provider>,
+	);
+}
+
+describe("TabVisibilityScope", () => {
+	test("an active tab is hidden while its parent is hidden", () => {
+		expect(seenBy(false, true)).toBe("<i>false</i>");
+		expect(seenBy(true, true)).toBe("<i>true</i>");
+	});
+
+	test("an inactive tab stays hidden when its parent is shown", () => {
+		expect(seenBy(true, false)).toBe("<i>false</i>");
+		expect(seenBy(false, false)).toBe("<i>false</i>");
+	});
+});

packages/panes/src/react/components/Workspace/components/KeptTab/components/TabVisibilityScope/TabVisibilityScope.tsx

@@ -0,0 +1,22 @@
+import type { ReactNode } from "react";
+import {
+	TabVisibilityContext,
+	useIsTabVisible,
+} from "../../../../../../hooks/useIsTabVisible";
+
+interface TabVisibilityScopeProps {
+	visible: boolean;
+	children: ReactNode;
+}
+
+export function TabVisibilityScope({
+	visible,
+	children,
+}: TabVisibilityScopeProps) {
+	const isParentVisible = useIsTabVisible();
+	return (
+		<TabVisibilityContext.Provider value={visible && isParentVisible}>
+			{children}
+		</TabVisibilityContext.Provider>
+	);
+}

packages/panes/src/react/components/Workspace/components/KeptTab/components/TabVisibilityScope/index.ts

@@ -0,0 +1 @@
+export { TabVisibilityScope } from "./TabVisibilityScope";

packages/panes/src/react/index.ts

@@ -3,7 +3,7 @@ export {
 	useTabTitle,
 	Workspace,
 } from "./components/Workspace";
-export { useIsTabVisible } from "./hooks/useIsTabVisible";
+export { TabVisibilityContext, useIsTabVisible } from "./hooks/useIsTabVisible";
 export { usePaneFocus } from "./hooks/usePaneFocus";
 export type {
 	ContextMenuActionConfig,