Update index.html

index.html

@@ -2859,32 +2859,44 @@ const LN_CAT_LABELS = {
     sec:'🚨 SEC ACTION', battle:'⚔️ BATTLE', swarm:'🐝 SWARM ALERT',
     hot_post:'🔥 TRENDING', evolution:'🧬 EVOLUTION', editorial:'🎙️ EDITORIAL', market_wrap:'📊 MARKET',
 };
-let lnData = null, lnFilter = 'all', lnStudioIdx = 0, lnStudioTimer = null, lnAutoRefresh = null;
+let lnData = null, lnFilter = 'all', lnStudioIdx = 0, lnStudioTimer = null, lnAutoRefresh = null, lnRetryCount = 0;
 
 async function loadLiveNews(){
     const feedEl = document.getElementById('lnFeed');
     const titleEl = document.getElementById('lnFeedTitle');
-    // Immediate visual feedback
+    // Show loading spinner (only on first load or empty state)
+    if(!lnData && feedEl){
+        feedEl.innerHTML = `<div class="ln-no-stories"><div class="big" style="animation:pulse 1.5s infinite">📡</div><div style="font-size:16px;font-weight:700;margin-bottom:6px">Loading P&D LIVE...</div><div style="font-size:12px;color:var(--muted)">Fetching ${lnRetryCount>0?'(retry '+lnRetryCount+')':''}...</div></div>`;
+    }
     if(titleEl) titleEl.textContent = '📡 LIVE FEED — Fetching...';
+    
+    // AbortController with 12s timeout
+    const controller = new AbortController();
+    const timeoutId = setTimeout(()=> controller.abort(), 12000);
+    
     let r;
     try{
-        const resp = await fetch('/api/live-news?hours=24');
+        const resp = await fetch('/api/live-news?hours=24', {signal: controller.signal});
+        clearTimeout(timeoutId);
         if(!resp.ok){
-            // API returned error status
             const errText = await resp.text().catch(()=>'');
             console.error('Live news API status:', resp.status, errText);
             if(titleEl) titleEl.textContent = '📡 LIVE FEED — API Error ('+resp.status+')';
-            if(feedEl) feedEl.innerHTML = `<div class="ln-no-stories"><div class="big">⚠️</div><div style="font-size:14px;font-weight:600;color:var(--red)">API Error ${resp.status}</div><div style="font-size:11px;margin-top:6px;color:var(--muted);max-width:400px;word-break:break-all">${esc(errText.substring(0,300))}</div><div style="margin-top:12px"><button class="btn btn-primary" onclick="loadLiveNews()" style="padding:8px 20px;font-size:12px">🔄 Retry</button></div></div>`;
-            renderLiveCounters({});
+            if(feedEl && !lnData) feedEl.innerHTML = `<div class="ln-no-stories"><div class="big">⚠️</div><div style="font-size:14px;font-weight:600;color:var(--red)">API Error ${resp.status}</div><div style="font-size:11px;margin-top:6px;color:var(--muted);max-width:400px;word-break:break-all">${esc(errText.substring(0,300))}</div><div style="margin-top:12px"><button class="btn btn-primary" onclick="loadLiveNews()" style="padding:8px 20px;font-size:12px">🔄 Retry</button></div></div>`;
+            _scheduleLiveRetry();
             return;
         }
         r = await resp.json();
         console.log('Live news loaded:', r.total_stories||0, 'stories', r.error||'');
+        lnRetryCount = 0; // Reset on success
     }catch(e){
-        console.error('Live news fetch error:', e);
-        if(titleEl) titleEl.textContent = '📡 LIVE FEED — Connection Error';
-        if(feedEl) feedEl.innerHTML = `<div class="ln-no-stories"><div class="big">📡</div><div style="font-size:14px;font-weight:600;color:var(--red)">Failed to connect to Live News API</div><div style="font-size:11px;margin-top:6px;color:var(--muted)">${esc(String(e))}</div><div style="margin-top:12px"><button class="btn btn-primary" onclick="loadLiveNews()" style="padding:8px 20px;font-size:12px">🔄 Retry</button></div></div>`;
-        renderLiveCounters({});
+        clearTimeout(timeoutId);
+        const isTimeout = e.name === 'AbortError';
+        console.error('Live news fetch error:', isTimeout ? 'TIMEOUT (12s)' : e);
+        if(titleEl) titleEl.textContent = isTimeout ? '📡 LIVE FEED — Timeout (retrying...)' : '📡 LIVE FEED — Connection Error';
+        // Only overwrite feed if we have NO prior data
+        if(feedEl && !lnData) feedEl.innerHTML = `<div class="ln-no-stories"><div class="big">${isTimeout?'⏱️':'📡'}</div><div style="font-size:14px;font-weight:600;color:var(--red)">${isTimeout?'Server is busy — retrying automatically':'Connection failed'}</div><div style="font-size:11px;margin-top:6px;color:var(--muted)">${isTimeout?'The live feed has many queries. Retrying in a few seconds...':esc(String(e))}</div><div style="margin-top:12px"><button class="btn btn-primary" onclick="lnRetryCount=0;loadLiveNews()" style="padding:8px 20px;font-size:12px">🔄 Retry Now</button></div></div>`;
+        _scheduleLiveRetry();
         return;
     }
     if(!r){renderLiveCounters({});return;}
@@ -2899,6 +2911,20 @@ async function loadLiveNews(){
     lnAutoRefresh = setInterval(()=>{if(cTab==='livenews')loadLiveNews();},60000);
 }
 
+function _scheduleLiveRetry(){
+    lnRetryCount++;
+    if(lnRetryCount > 5) {
+        lnRetryCount = 0; // Reset but stop aggressive retry
+        if(lnAutoRefresh) clearInterval(lnAutoRefresh);
+        lnAutoRefresh = setInterval(()=>{if(cTab==='livenews')loadLiveNews();},60000);
+        return;
+    }
+    // Exponential backoff: 3s, 6s, 12s, 20s, 30s
+    const delay = Math.min(3000 * Math.pow(1.8, lnRetryCount - 1), 30000);
+    console.log(`Live news retry #${lnRetryCount} in ${Math.round(delay/1000)}s`);
+    setTimeout(()=>{if(cTab==='livenews')loadLiveNews();}, delay);
+}
+
 function renderLiveBreaking(items){
     const bar = document.getElementById('lnBreaking');
     const track = document.getElementById('lnBreakTrack');