Progress Indicator Playground

Demo of the newsletter extraction progress indicator

Simulated Extraction

Click the button below to see how the progress indicator updates during a newsletter extraction. This simulates the actual flow: 0% → 10% → 20% → 50% → 90% → 100%

Progress States Reference

Queued for extraction

10%

Starting extraction from Gmail...

20%

Extracting newsletters from Gmail...

90%

Loading extraction results...

100%

Extraction complete!

How It Works

Frontend (React)

Polls backend every 2 seconds for status updates
Updates progress bar and message in real-time
Uses AbortController to handle fetch cancellations

Backend (FastAPI)

Runs extraction in background thread pool
Updates progress in PostgreSQL database
Handles blocking subprocess.run() operations safely

Database

Stores extraction status, progress %, and progress message
Enables progress tracking across server restarts
Allows multiple users to run extractions simultaneously