fix: add error handling and refresh indicator to auto-refresh

- 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>
This commit is contained in:
syoul
2026-03-22 18:34:47 +01:00
parent c6cb990b40
commit 2674b3891b

View File

@@ -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>
)}