Back to articles
How to Prevent Stuck Loading Spinners with Polling Timeouts in React

How to Prevent Stuck Loading Spinners with Polling Timeouts in React

via Dev.to Reactnareshipme

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

Read Full Article
7 views

Related Articles