fix(app): hide branch icon on non-git workspace headers

Gate the GitBranch icon behind isGitCheckout, and keep the header
skeleton visible until the checkout status query resolves so the icon
doesn't pop in and cause layout shift.
This commit is contained in:
Mohamed Boudra
2026-04-16 13:14:00 +07:00
parent 814098852c
commit 11b407c804
2 changed files with 9 additions and 6 deletions
@@ -45,7 +45,7 @@ export function BranchSwitcher({
const titleContent = ( const titleContent = (
<> <>
<GitBranch size={14} color={theme.colors.foregroundMuted} /> {isGitCheckout ? <GitBranch size={14} color={theme.colors.foregroundMuted} /> : null}
<Text testID="workspace-header-title" style={styles.headerTitle} numberOfLines={1}> <Text testID="workspace-header-title" style={styles.headerTitle} numberOfLines={1}>
{title} {title}
</Text> </Text>
@@ -731,12 +731,13 @@ function WorkspaceScreenContent({ serverId, workspaceId }: WorkspaceScreenProps)
}; };
}, [client, isConnected, normalizedWorkspaceId, queryClient, terminalsQueryKey]); }, [client, isConnected, normalizedWorkspaceId, queryClient, terminalsQueryKey]);
const isCheckoutQueryEnabled =
Boolean(client && isConnected) &&
normalizedWorkspaceId.length > 0 &&
isAbsolutePath(normalizedWorkspaceId);
const checkoutQuery = useQuery({ const checkoutQuery = useQuery({
queryKey: checkoutStatusQueryKey(normalizedServerId, normalizedWorkspaceId), queryKey: checkoutStatusQueryKey(normalizedServerId, normalizedWorkspaceId),
enabled: enabled: isCheckoutQueryEnabled,
Boolean(client && isConnected) &&
normalizedWorkspaceId.length > 0 &&
isAbsolutePath(normalizedWorkspaceId),
queryFn: async () => { queryFn: async () => {
if (!client) { if (!client) {
throw new Error("Host is not connected"); throw new Error("Host is not connected");
@@ -745,6 +746,8 @@ function WorkspaceScreenContent({ serverId, workspaceId }: WorkspaceScreenProps)
}, },
staleTime: 15_000, staleTime: 15_000,
}); });
const isCheckoutStatusLoading =
isCheckoutQueryEnabled && checkoutQuery.data === undefined && !checkoutQuery.isError;
const workspaceDescriptor = useSessionStore( const workspaceDescriptor = useSessionStore(
(state) => state.sessions[normalizedServerId]?.workspaces.get(normalizedWorkspaceId) ?? null, (state) => state.sessions[normalizedServerId]?.workspaces.get(normalizedWorkspaceId) ?? null,
@@ -758,7 +761,7 @@ function WorkspaceScreenContent({ serverId, workspaceId }: WorkspaceScreenProps)
const workspaceHeader = workspaceDescriptor const workspaceHeader = workspaceDescriptor
? resolveWorkspaceHeader({ workspace: workspaceDescriptor }) ? resolveWorkspaceHeader({ workspace: workspaceDescriptor })
: null; : null;
const isWorkspaceHeaderLoading = workspaceHeader === null; const isWorkspaceHeaderLoading = workspaceHeader === null || isCheckoutStatusLoading;
const workspaceHeaderTitle = workspaceHeader?.title ?? ""; const workspaceHeaderTitle = workspaceHeader?.title ?? "";
const workspaceHeaderSubtitle = workspaceHeader?.subtitle ?? ""; const workspaceHeaderSubtitle = workspaceHeader?.subtitle ?? "";
const shouldShowWorkspaceHeaderSubtitle = !areHeaderLabelsEquivalent( const shouldShowWorkspaceHeaderSubtitle = !areHeaderLabelsEquivalent(