From 887ea212372818943e5f5dcc6bfeb08385a55edb Mon Sep 17 00:00:00 2001
From: Andrew Aquino <dawneraq@gmail.com>
Date: Tue, 2 Jun 2026 11:49:10 -0700
Subject: [PATCH] feat: show Spinner before agent logs are rendered (#25820)

related to DEVEX-313


https://github.com/user-attachments/assets/5fb074bd-7ee7-4f11-9c0a-30567cd71abc
---
 site/src/modules/resources/AgentRow.tsx | 19 ++++++++++++++-----
 1 file changed, 14 insertions(+), 5 deletions(-)

diff --git a/site/src/modules/resources/AgentRow.tsx b/site/src/modules/resources/AgentRow.tsx
index 46c306613e..f1c44ef1e8 100644
--- a/site/src/modules/resources/AgentRow.tsx
+++ b/site/src/modules/resources/AgentRow.tsx
@@ -305,7 +305,9 @@ export const AgentRow: FC<AgentRowProps> = ({
 		...sortedSourceLogTabs,
 	];
 	const hasAnyLogs = agentLogs.length > 0;
-	const logTabsMeasureEnabled = hasStartupFeatures && hasAnyLogs && showLogs;
+	const shouldExpandLogs = showLogs || (!hasStartupFeatures && hasAgentIssues);
+	const shouldShowLogsTabs = hasStartupFeatures && hasAnyLogs;
+	const logTabsMeasureEnabled = shouldShowLogsTabs && showLogs;
 	const {
 		containerRef: logTabsListContainerRef,
 		visibleTabs: visibleLogTabs,
@@ -529,7 +531,7 @@ export const AgentRow: FC<AgentRowProps> = ({
 									<span>{runningScriptsCount}</span>
 								</Badge>
 							)}
-						{healthIssues.length > 0 && (
+						{hasAgentIssues && (
 							<Badge
 								variant={hasWarningIssues ? "warning" : "info"}
 								size="xs"
@@ -545,9 +547,16 @@ export const AgentRow: FC<AgentRowProps> = ({
 						)}
 					</Button>
 				</div>
-				<Collapse in={showLogs || (!hasStartupFeatures && hasAgentIssues)}>
+				<Collapse in={shouldExpandLogs}>
 					<div className={cn("px-4", hasStartupFeatures ? "pb-4" : "py-4")}>
-						{healthIssues.length > 0 && (
+						{/*
+						  Collapse's `in` condition is needed here,
+							or else the Spinner will also show as Collapse is closing
+						*/}
+						{shouldExpandLogs && !(hasAgentIssues || shouldShowLogsTabs) && (
+							<Spinner size="lg" loading className="block mx-auto" />
+						)}
+						{hasAgentIssues && (
 							<div className="mb-4 flex flex-col gap-3">
 								{healthIssues.map((issue) => (
 									<AgentAlert
@@ -558,7 +567,7 @@ export const AgentRow: FC<AgentRowProps> = ({
 								))}
 							</div>
 						)}
-						{hasStartupFeatures && hasAnyLogs && (
+						{shouldShowLogsTabs && (
 							<div className="border border-solid rounded-md overflow-clip">
 								<Tabs
 									className="-mx-px -mt-px"