From bde0459416f55c0e057943f35520ca8c575e0d8e Mon Sep 17 00:00:00 2001 From: hsiegeln <37154749+hsiegeln@users.noreply.github.com> Date: Thu, 26 Mar 2026 11:03:38 +0100 Subject: [PATCH] fix: prevent log viewer flicker on ExchangeDetail page Skip global time range in the logs query key when filtering by exchangeId (exchange logs are historical, the sliding time window is irrelevant). Add placeholderData to keep previous results visible during query key transitions on other pages. Co-Authored-By: Claude Opus 4.6 (1M context) --- ui/src/api/queries/logs.ts | 14 +++++++++++--- 1 file changed, 11 insertions(+), 3 deletions(-) diff --git a/ui/src/api/queries/logs.ts b/ui/src/api/queries/logs.ts index aa39f272..e64d188d 100644 --- a/ui/src/api/queries/logs.ts +++ b/ui/src/api/queries/logs.ts @@ -21,17 +21,24 @@ export function useApplicationLogs( const refetchInterval = useRefreshInterval(15_000); const { timeRange } = useGlobalFilters(); const to = options?.toOverride ?? timeRange.end.toISOString(); + // When filtering by exchangeId, skip the global time range — exchange logs are historical + const useTimeRange = !options?.exchangeId; return useQuery({ - queryKey: ['logs', application, agentId, timeRange.start.toISOString(), to, options?.limit, options?.exchangeId], + queryKey: ['logs', application, agentId, + useTimeRange ? timeRange.start.toISOString() : null, + useTimeRange ? to : null, + options?.limit, options?.exchangeId], queryFn: async () => { const token = useAuthStore.getState().accessToken; const params = new URLSearchParams(); params.set('application', application!); if (agentId) params.set('agentId', agentId); if (options?.exchangeId) params.set('exchangeId', options.exchangeId); - params.set('from', timeRange.start.toISOString()); - params.set('to', to); + if (useTimeRange) { + params.set('from', timeRange.start.toISOString()); + params.set('to', to); + } if (options?.limit) params.set('limit', String(options.limit)); const res = await fetch(`${config.apiBaseUrl}/logs?${params}`, { headers: { @@ -43,6 +50,7 @@ export function useApplicationLogs( return res.json() as Promise; }, enabled: !!application, + placeholderData: (prev) => prev, refetchInterval, }); }