From 2674b3891b98f37ead4136f62174afac47f15249 Mon Sep 17 00:00:00 2001
From: syoul <syoul@librezo.fr>
Date: Sun, 22 Mar 2026 18:34:47 +0100
Subject: [PATCH] fix: add error handling and refresh indicator to auto-refresh
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Add .catch() so failed background fetches don't silently break the interval
- Add refreshing state with a spinning ↻ on the live badge during background updates

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 src/App.tsx | 26 +++++++++++++++++---------
 1 file changed, 17 insertions(+), 9 deletions(-)

diff --git a/src/App.tsx b/src/App.tsx
index ac3bbe0..a2e29c0 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -11,6 +11,7 @@ export default function App() {
   const [transactions, setTransactions] = useState<Transaction[]>([]);
   const [stats, setStats] = useState<PeriodStats | null>(null);
   const [loading, setLoading] = useState(true);
+  const [refreshing, setRefreshing] = useState(false);
   const [source, setSource] = useState<'live' | 'mock'>('mock');
 
   useEffect(() => {
@@ -18,14 +19,19 @@ export default function App() {
 
     const load = (showLoading: boolean) => {
       if (showLoading) setLoading(true);
-      fetchData(periodDays).then(({ transactions, stats, source }) => {
-        if (!cancelled) {
-          setTransactions(transactions);
-          setStats(stats);
-          setSource(source);
-          setLoading(false);
-        }
-      });
+      else setRefreshing(true);
+      fetchData(periodDays)
+        .then(({ transactions, stats, source }) => {
+          if (!cancelled) {
+            setTransactions(transactions);
+            setStats(stats);
+            setSource(source);
+          }
+        })
+        .catch((err) => console.warn('Ğ1Flux refresh error:', err))
+        .finally(() => {
+          if (!cancelled) { setLoading(false); setRefreshing(false); }
+        });
     };
 
     load(true);
@@ -59,7 +65,9 @@ export default function App() {
                 ? 'bg-emerald-950/80 border-emerald-700 text-emerald-400'
                 : 'bg-[#0a0b0f]/80 border-[#2e2f3a] text-[#4b5563]'
             }`}>
-              {source === 'live' ? '● live Ğ1v2' : '○ mock'}
+              {source === 'live'
+                ? <>{refreshing ? <span className="animate-spin inline-block">↻</span> : '●'} live Ğ1v2</>
+                : '○ mock'}
             </div>
           </div>
         )}