From eda1bba96977c1cdad091c04f35e748e88777d16 Mon Sep 17 00:00:00 2001
From: Jeremy Ruppel <jeremyruppel@users.noreply.github.com>
Date: Fri, 27 Mar 2026 19:09:42 -0400
Subject: [PATCH] fix(site): show table loader during session list pagination
 (#23719)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

This patch shows the loading spinner on the AI Bridge Sessions table
during pagination. These API calls can take a noticeable amount of time
on dogfood, and without this it shows stale data while the fetch is
fetching.

Claude with the assist 🤖

Co-authored-by: Claude Sonnet 4.6 <noreply@anthropic.com>
Co-authored-by: Kayla はな <mckayla@hey.com>
---
 .../AIBridgePage/ListSessionsPage/ListSessionsPage.tsx    | 1 +
 .../ListSessionsPage/ListSessionsPageView.stories.tsx     | 8 ++++++++
 .../ListSessionsPage/ListSessionsPageView.tsx             | 4 +++-
 3 files changed, 12 insertions(+), 1 deletion(-)

diff --git a/site/src/pages/AIBridgePage/ListSessionsPage/ListSessionsPage.tsx b/site/src/pages/AIBridgePage/ListSessionsPage/ListSessionsPage.tsx
index 203de4d9be..d8bc298cb6 100644
--- a/site/src/pages/AIBridgePage/ListSessionsPage/ListSessionsPage.tsx
+++ b/site/src/pages/AIBridgePage/ListSessionsPage/ListSessionsPage.tsx
@@ -62,6 +62,7 @@ const AISessionListPage: FC = () => {
 
 			<ListSessionsPageView
 				isLoading={sessionsQuery.isLoading}
+				isFetching={sessionsQuery.isFetching}
 				isAISessionsEntitled={isEntitled}
 				isAISessionsEnabled={isEnabled}
 				sessions={sessionsQuery.data?.sessions}
diff --git a/site/src/pages/AIBridgePage/ListSessionsPage/ListSessionsPageView.stories.tsx b/site/src/pages/AIBridgePage/ListSessionsPage/ListSessionsPageView.stories.tsx
index d5b762ae16..bc476f2506 100644
--- a/site/src/pages/AIBridgePage/ListSessionsPage/ListSessionsPageView.stories.tsx
+++ b/site/src/pages/AIBridgePage/ListSessionsPage/ListSessionsPageView.stories.tsx
@@ -32,6 +32,7 @@ const meta: Meta<typeof ListSessionsPageView> = {
 	component: ListSessionsPageView,
 	args: {
 		isLoading: false,
+		isFetching: false,
 		isAISessionsEntitled: true,
 		isAISessionsEnabled: true,
 		filterProps: defaultFilterProps,
@@ -77,6 +78,13 @@ export const Loaded: Story = {
 	},
 };
 
+export const Fetching: Story = {
+	args: {
+		isFetching: true,
+		sessions: [MockSession],
+	},
+};
+
 export const MultipleSessions: Story = {
 	args: {
 		sessions: Array.from({ length: 5 }, (_, i) => ({
diff --git a/site/src/pages/AIBridgePage/ListSessionsPage/ListSessionsPageView.tsx b/site/src/pages/AIBridgePage/ListSessionsPage/ListSessionsPageView.tsx
index 31c22f6015..c4f07cf5a4 100644
--- a/site/src/pages/AIBridgePage/ListSessionsPage/ListSessionsPageView.tsx
+++ b/site/src/pages/AIBridgePage/ListSessionsPage/ListSessionsPageView.tsx
@@ -30,6 +30,7 @@ import { ListSessionsRow } from "./ListSessionsRow";
 
 interface ListSessionsPageViewProps {
 	isLoading: boolean;
+	isFetching: boolean;
 	isAISessionsEntitled: boolean;
 	isAISessionsEnabled: boolean;
 	sessions?: readonly AIBridgeSession[];
@@ -56,6 +57,7 @@ const ThreadTooltip: FC<PropsWithChildren> = ({ children }) => (
 
 export const ListSessionsPageView: FC<ListSessionsPageViewProps> = ({
 	isLoading,
+	isFetching,
 	isAISessionsEntitled,
 	isAISessionsEnabled,
 	sessions,
@@ -110,7 +112,7 @@ export const ListSessionsPageView: FC<ListSessionsPageViewProps> = ({
 						</TableRow>
 					</TableHeader>
 					<TableBody>
-						{isLoading ? (
+						{isLoading || isFetching ? (
 							<TableLoader />
 						) : sessions?.length === 0 ? (
 							<TableEmpty message="No session logs available" />