How We Made Waiting Fun: Whimsical Loading States and Stepped Progress in Next.js

Long-running background jobs are a fact of life in video processing. When a user uploads a 30-minute video, your AI pipeline might need two or three minutes to download, transcribe, and clip it. The worst thing you can do is show a spinner and leave people wondering if something broke. In ClipCrafter — an AI-powered tool that turns long videos into short, shareable clips — we recently overhauled our processing UX. Here's how we did it with React, TypeScript, and a little personality. The problem Our original processing screen was a single progress bar with a generic "Processing…" label. Users had no idea which stage the pipeline was in, how long it would take, or whether the page was even still working. Support messages spiked every time processing took longer than 90 seconds. Solution 1 — Rotating whimsical messages We created a dedicated module — loadingMessages.ts — that maps each pipeline stage to an array of light-hearted messages: // src/lib/loadingMessages.ts const stageMessages