Progress Bars III

Build a list of progress bars that fill concurrently, but at most three at a time. Where Progress Bars II ran them strictly one-by-one, this version runs a pool: three fill together, and the moment one finishes, the next waiting bar takes its place. It's the classic concurrency-limit (a.k.a. rate-limit / worker-pool) problem, rendered as progress bars.

Signature

// A self-contained component. No props.
function App(): JSX.Element;

Several bars where no more than three are ever filling simultaneously; completing one starts the next pending bar.

Examples

start:        bars 0,1,2 filling | 3,4,5 waiting
bar 1 done:   bars 0,2,3 filling | 4,5 waiting     (3 took 1's slot)
bar 0 done:   bars 2,3,4 filling | 5 waiting
…             until all six are done

Invariant: count(running) ≤ 3 at all times. A freed slot is immediately
filled by the next pending bar (if any).

Notes

• A pool of three. Track each bar's status (pending / running / done). Keep the running count ≤ 3.
• Refill on completion. When a bar finishes, promote the next pending bar so the pool stays full until nothing's left.
• Detect completion from the animation. Each running bar animates 0 → 100% via CSS; listen for its transitionend to know it's done.
• Out of scope. Pausing/resuming individual bars — that's Progress Bars IV. Here bars only run to completion.