
How to Prevent Stuck Loading Spinners with Polling Timeouts in React
You've seen it: the user kicks off an async job, the loading spinner appears, and then… nothing. The spinner just spins forever. The job may have completed, crashed, or timed out on the server — but the client has no idea. This is a common failure mode when you're polling a status endpoint. Here's how to fix it with a simple timeout guard. The Problem Polling usually looks something like this: const [ status , setStatus ] = useState < ' pending ' | ' processing ' | ' done ' | ' error ' > ( ' pending ' ); useEffect (() => { if ( status === ' done ' || status === ' error ' ) return ; const interval = setInterval ( async () => { const res = await fetch ( `/api/projects/ ${ id } /status` ); const data = await res . json (); setStatus ( data . status ); }, 2000 ); return () => clearInterval ( interval ); }, [ status , id ]); The bug: if the server-side job gets stuck (Inngest step hung, ffmpeg process zombie'd, webhook never arrived), status stays 'processing' forever. The interval keeps fi
Continue reading on Dev.to React
Opens in a new tab




.jpg&w=1200&q=75)