feat: auto-load technical indicators on page load and show loading states in all cells
This commit is contained in:
+23
-4
@@ -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" />
|
||||
|
||||
Reference in New Issue
Block a user