diff --git a/src/pages/UsageRecordsPage.tsx b/src/pages/UsageRecordsPage.tsx index 0abf5a1..8fd7723 100644 --- a/src/pages/UsageRecordsPage.tsx +++ b/src/pages/UsageRecordsPage.tsx @@ -271,7 +271,6 @@ export function UsageRecordsPage() { const [pricing, setPricing] = useState(null); const [loading, setLoading] = useState(true); const [error, setError] = useState(''); - const [loadedScopeKey, setLoadedScopeKey] = useState(''); const loadedFilterScopeKeyRef = useRef(''); const requestIdRef = useRef(0); const schedulerRef = useRef | null>(null); @@ -328,32 +327,6 @@ export function UsageRecordsPage() { pageSize: 1, }), [customEnd, customStart, range]); - const scopeKey = useMemo(() => usageViewScopeKey({ - tab: activeTab, - range, - customStart, - customEnd, - model, - provider, - source, - apiKeyHash, - result, - page, - pageSize, - }), [ - activeTab, - apiKeyHash, - customEnd, - customStart, - model, - page, - pageSize, - provider, - range, - result, - source, - ]); - const executeLoadData = useCallback( async (quiet = false) => { const requestId = ++requestIdRef.current; @@ -419,7 +392,6 @@ export function UsageRecordsPage() { setStatus(nextStatus); if (nextOptions) setOptionsAnalysis(nextOptions); } - setLoadedScopeKey(scopeKey); if (filtersChanged) loadedFilterScopeKeyRef.current = filterScopeKey; setError(''); } catch (requestError) { @@ -428,7 +400,7 @@ export function UsageRecordsPage() { if (requestId === requestIdRef.current) setLoading(false); } }, - [activeTab, buildQueries, filterScopeKey, page, pageSize, model, provider, source, apiKeyHash, result, scopeKey] + [activeTab, buildQueries, filterScopeKey, page, pageSize, model, provider, source, apiKeyHash, result] ); const loadData = useCallback( @@ -484,16 +456,14 @@ export function UsageRecordsPage() { }; const collectorTone = status?.state === 'error' ? 'error' : status?.state === 'collecting' ? 'success' : ''; - const hasCurrentSnapshot = loadedScopeKey === scopeKey; const showInitialLoading = activeTab !== 'data-management' && !error && - (!hasCurrentSnapshot || - (loading && - ((activeTab === 'overview' && !overview) || - (activeTab === 'analysis' && !overview) || - (activeTab === 'events' && !events) || - (activeTab === 'pricing' && !pricing)))); + loading && + ((activeTab === 'overview' && !overview) || + (activeTab === 'analysis' && !overview && !analysis) || + (activeTab === 'events' && !events) || + (activeTab === 'pricing' && !pricing)); const handleTabKeyDown = (event: KeyboardEvent, tab: UsageTab) => { handleHorizontalTabKey( @@ -716,12 +686,12 @@ export function UsageRecordsPage() { ) : null} - {hasCurrentSnapshot && activeTab === 'overview' && overview ? : null} - {hasCurrentSnapshot && activeTab === 'analysis' ? : null} + {activeTab === 'overview' && overview ? : null} + {activeTab === 'analysis' && (analysis || overview) ? : null} {activeTab === 'events' ? ( ) : null} - {hasCurrentSnapshot && activeTab === 'pricing' && pricing ? ( + {activeTab === 'pricing' && pricing ? ( loadData(true)} /> ) : null} {activeTab === 'data-management' ? : null} diff --git a/src/styles/ui-refinements.css b/src/styles/ui-refinements.css index fd335e4..084e8fb 100644 --- a/src/styles/ui-refinements.css +++ b/src/styles/ui-refinements.css @@ -634,8 +634,13 @@ body, html, #root { } .usage-records-page .usage-filter-item:focus-within { - border-color: var(--ui-accent); - box-shadow: 0 0 0 3px var(--ui-focus-ring); + border-color: var(--border-hover); + box-shadow: none; +} + +.usage-records-page .usage-filter-item .select-menu-trigger:focus, +.usage-records-page .usage-filter-item .select-menu-trigger:focus-visible { + outline: none; } .usage-records-page .usage-filter-item select:hover,