feat: auto-load technical indicators on page load and show loading states in all cells

This commit is contained in:
2026-05-16 22:09:03 +02:00
parent 046e81ffc1
commit 5e865b9c26
+23 -4
View File
@@ -210,6 +210,22 @@ export default function Analyze() {
loadPortfolio();
}, []);
// Auto-load indicators for stocks that don't have them yet
useEffect(() => {
const unloaded = stocks.filter((s) => !s.indicatorsLoading && s.indicators.rsi == null);
if (unloaded.length === 0) return;
unloaded.forEach(async (stock) => {
setStocks((s) => s.map((st) => st.id === stock.id ? { ...st, indicatorsLoading: true } : st));
const indicators = await loadIndicators(stock.ticker);
if (indicators) {
setStocks((s) => s.map((st) => st.id === stock.id ? { ...st, indicators, indicatorsLoading: false } : st));
} else {
setStocks((s) => s.map((st) => st.id === stock.id ? { ...st, indicatorsLoading: false } : st));
}
});
}, [stocks]);
useEffect(() => {
const interval = setInterval(() => {
stocks.forEach((stock) => {
@@ -388,7 +404,6 @@ export default function Analyze() {
const loadAllIndicators = async () => {
for (const stock of stocks) {
if (stock.indicators.rsi != null) continue;
setStocks((s) => s.map((st) => st.id === stock.id ? { ...st, indicatorsLoading: true } : st));
const indicators = await loadIndicators(stock.ticker);
if (indicators) {
@@ -408,7 +423,7 @@ export default function Analyze() {
<div className="flex items-center justify-between mb-6">
<h1 className="text-3xl font-bold text-gray-900">Portfolio Analysis</h1>
<button onClick={loadAllIndicators} className="text-sm text-blue-600 hover:underline font-medium">
Load All Indicators
Refresh Indicators
</button>
</div>
@@ -469,7 +484,7 @@ export default function Analyze() {
<td className="py-3 px-3 relative">
<div className="flex items-center gap-2">
{stock.indicatorsLoading ? (
<span className="text-xs text-gray-400">Loading...</span>
<span className="text-xs text-gray-400 animate-pulse">Loading...</span>
) : (
<>
<SignalSummary price={stock.currentPrice} indicators={stock.indicators} />
@@ -499,10 +514,14 @@ export default function Analyze() {
<td className="py-3 px-3">
{stock.indicators.macd != null ? (
<MacdBadge value={stock.indicators.macd} />
) : stock.indicatorsLoading ? (
<span className="text-xs text-gray-400">...</span>
) : "-"}
</td>
<td className="py-3 px-3">
{stock.currentPrice && stock.indicators.sma20 && stock.indicators.sma50 ? (
{stock.indicatorsLoading ? (
<span className="text-xs text-gray-400">...</span>
) : stock.currentPrice && stock.indicators.sma20 && stock.indicators.sma50 ? (
<div className="space-y-0.5">
<PriceVsSma price={stock.currentPrice} sma={stock.indicators.sma20} label="SMA20" />
<PriceVsSma price={stock.currentPrice} sma={stock.indicators.sma50} label="SMA50" />