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:
26
src/App.tsx
26
src/App.tsx
@@ -11,6 +11,7 @@ export default function App() {
|
|||||||
const [transactions, setTransactions] = useState<Transaction[]>([]);
|
const [transactions, setTransactions] = useState<Transaction[]>([]);
|
||||||
const [stats, setStats] = useState<PeriodStats | null>(null);
|
const [stats, setStats] = useState<PeriodStats | null>(null);
|
||||||
const [loading, setLoading] = useState(true);
|
const [loading, setLoading] = useState(true);
|
||||||
|
const [refreshing, setRefreshing] = useState(false);
|
||||||
const [source, setSource] = useState<'live' | 'mock'>('mock');
|
const [source, setSource] = useState<'live' | 'mock'>('mock');
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
@@ -18,14 +19,19 @@ export default function App() {
|
|||||||
|
|
||||||
const load = (showLoading: boolean) => {
|
const load = (showLoading: boolean) => {
|
||||||
if (showLoading) setLoading(true);
|
if (showLoading) setLoading(true);
|
||||||
fetchData(periodDays).then(({ transactions, stats, source }) => {
|
else setRefreshing(true);
|
||||||
if (!cancelled) {
|
fetchData(periodDays)
|
||||||
setTransactions(transactions);
|
.then(({ transactions, stats, source }) => {
|
||||||
setStats(stats);
|
if (!cancelled) {
|
||||||
setSource(source);
|
setTransactions(transactions);
|
||||||
setLoading(false);
|
setStats(stats);
|
||||||
}
|
setSource(source);
|
||||||
});
|
}
|
||||||
|
})
|
||||||
|
.catch((err) => console.warn('Ğ1Flux refresh error:', err))
|
||||||
|
.finally(() => {
|
||||||
|
if (!cancelled) { setLoading(false); setRefreshing(false); }
|
||||||
|
});
|
||||||
};
|
};
|
||||||
|
|
||||||
load(true);
|
load(true);
|
||||||
@@ -59,7 +65,9 @@ export default function App() {
|
|||||||
? 'bg-emerald-950/80 border-emerald-700 text-emerald-400'
|
? 'bg-emerald-950/80 border-emerald-700 text-emerald-400'
|
||||||
: 'bg-[#0a0b0f]/80 border-[#2e2f3a] text-[#4b5563]'
|
: '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>
|
||||||
</div>
|
</div>
|
||||||
)}
|
)}
|
||||||
|
|||||||
Reference in New Issue
Block a user