From 5e865b9c26ef920c442c51216d6d91a1c2e2a58e Mon Sep 17 00:00:00 2001
From: Henry Winkel <Henry-Winkel@web.de>
Date: Sat, 16 May 2026 22:09:03 +0200
Subject: [PATCH] feat: auto-load technical indicators on page load and show
 loading states in all cells

---
 app/routes/analyze.tsx | 27 +++++++++++++++++++++++----
 1 file changed, 23 insertions(+), 4 deletions(-)

diff --git a/app/routes/analyze.tsx b/app/routes/analyze.tsx
index 4335626..61dee98 100644
--- a/app/routes/analyze.tsx
+++ b/app/routes/analyze.tsx
@@ -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" />