Frontend refactor

[leo-Zhizhu]

Refactor frontend: Integrate TanStack Query for optimal data fetching

- Replace manual AbortControllers and useEffect polls with useQuery

- Implement intelligent caching and background refetch logic for dashboard and market data

- De-duplicate API requests and improve Largest Contentful Paint metric

[leo-Zhizhu]

Before:

After:

Before:

After:

[Chen-zexi]

Code review

Found 3 issues:

1. Missing snapshot prop on <MarketChart> — regression of bugfix ac7a650. The snapshotData is available and passed to <StockHeader>, but it was silently dropped from <MarketChart> during the extraction refactor. This breaks extended-hours close lines and after-hours price display.

LangAlpha/web/src/pages/MarketView/MarketView.jsx

Lines 391 to 409 in ca5b77d

	)}
	<MarketChart
	ref={chartRef}
	symbol={selectedStock}
	interval={selectedInterval}
	onIntervalChange={handleIntervalChange}
	onCapture={handleCaptureChart}
	onStockMeta={handleStockMeta}
	onLatestBar={handleLatestBar}
	quoteData={overviewData?.quote || null}
	earningsData={overviewData?.earningsSurprises || null}
	overlayData={overlayData}
	stockMeta={chartMeta}
	liveTick={wsPrices.get(selectedStock)?.barData || null}
	wsStatus={wsStatus}
	ginlixDataEnabled={ginlixDataEnabled}
	/>
	</div>
	</div>

2. Error swallowing in queryFn defeats TanStack Query retry and AbortError handling. The catch block returns fallback data on ALL errors including AbortError, which means: (a) retry: 1 global config is bypassed, (b) aborted queries cache fake data as "successful", (c) the query never enters error state. Re-throw abort errors and let real errors propagate so TanStack Query can retry.

LangAlpha/web/src/pages/MarketView/hooks/useStockData.js

Lines 40 to 53 in ca5b77d

	return data;
	} catch (error) {
	// If the stock is bogus or fetch fails, fallback so UI has skeleton data
	return {
	stockInfo: {
	Symbol: selectedStock,
	Name: `${selectedStock} Corp`,
	Exchange: 'NASDAQ',
	},
	realTimePrice: null,
	snapshot: null,
	};
	}
	},

3. Background tab polling not suppressed — behavioral regression. The old code used document.hidden guards (added in 2b791f8) to skip API calls when the tab is hidden. TanStack Query v5's refetchIntervalInBackground defaults to true, so all polling queries now fire in hidden tabs. Add refetchIntervalInBackground: false to every query that uses refetchInterval.

LangAlpha/web/src/pages/Dashboard/hooks/useDashboardData.js

Lines 31 to 50 in ca5b77d

	queryFn: fetchMarketStatus,
	refetchInterval: 60000,
	staleTime: 30000,
	});
	// 2. Market Indices (Adaptive Polling: 30s open / 60s closed)
	const isMarketOpen = marketStatus?.market === 'open' ||
	(marketStatus && !marketStatus.afterHours && !marketStatus.earlyHours && marketStatus.market !== 'closed');
	const { data: indices, isLoading: indicesLoading } = useQuery({
	queryKey: ['dashboard', 'indices', INDEX_SYMBOLS],
	queryFn: async () => {
	const { indices: next } = await getIndices(INDEX_SYMBOLS);
	return next;
	},
	// Using placeholderData provides standard fallback values instantly
	// without populating the cache as "fresh", thereby triggering an immediate background fetch
	placeholderData: () => INDEX_SYMBOLS.map((s) => fallbackIndex(normalizeIndexSymbol(s))),
	refetchInterval: isMarketOpen ? 30000 : 60000,
	staleTime: 10000,

🤖 Generated with Claude Code

_{- If this code review was useful, please react with 👍. Otherwise, react with 👎.}