Journal

Build a Sora-Style AI Video Progress Bar in SwiftUI

AI video gen is slow and server-side, so honest progress beats a fake percentage. Here is how to build the Sora-style flow.

Build a Sora-Style AI Video Progress Bar in SwiftUI: a glass photo icon surrounded by chat, music, heart, camera and shopping app icons on a pastel gradient

TL;DR

A Sora-style AI video generation progress bar has one honest job: reflect a slow, server-side process truthfully. Video generation runs on a server and takes minutes, so the UI cannot show a real percentage, and faking one that creeps to 100% is the mistake. The honest pattern is a queue position, an elapsed time, and the real stage, with the user free to leave the app and a push notification when the video is ready. A free VP0 AI video progress template gives an agent the queued, generating, and done states plus the leave-and-notify flow to extend, while you wire the generation API.

What an AI video progress UI is really for

A Sora-style video generation progress bar exists to make a slow, uncertain wait feel honest and bearable. Generating a video with an AI model is not instant and it does not run on the phone: the heavy model runs on a server and takes minutes, sometimes through a queue before it even starts. So the progress UI is not decorating a quick operation, it is managing a real wait over which the app has little visibility, and its job is to set honest expectations rather than to imply precision it does not have. The output, often a clip at 1,920 by 1,080, is worth waiting for, but only if the wait is handled with respect.

Framing it that way changes the design goal. The temptation is to make the wait feel fast and precise; the right goal is to make it feel honest and leave-able, because a user who trusts the progress and can walk away is happier than one watched by a bar that pretends to know more than it does.

The mistake: a fake percentage

The most common error is a percentage bar that smoothly creeps toward 100%, because the app does not actually know how far along a server-side generation is. That invented progress feels precise and then betrays the user: it sits at 99% for a long time, or it reaches 100% while the video is still rendering, and either way it has lied. A generation pipeline rarely reports a meaningful continuous percentage, so presenting one is dishonest, and users quickly learn not to trust it. The honest alternative is to show what you genuinely know, where the request sits in the queue, how long it has been running, and which stage it is in, rather than a fabricated fraction.

This is the core discipline. A progress UI that admits it does not know the exact percentage, and shows real signals instead, earns more trust than a smooth bar that turns out to be fiction.

What honest progress looks like

Honest progress is built from things the server can actually report. While the request waits, show its queue position, so the user knows whether they are next or tenth. Once it starts, show an elapsed timer and the current stage, queued, generating, finishing, rather than a percentage, and give a rough expectation if the service can provide a typical time. SwiftUI makes the states straightforward, and where an indeterminate indicator fits, a Gauge or a looping animation communicates activity without claiming a false fraction. The same honest-queue discipline drives a Midjourney-style prompt input and the per-item states of a Midjourney-style image grid.

The animation should signal that work is happening without implying measured progress. A gentle, continuous motion says active and unknown; a creeping percentage says precisely tracked, which is the false claim to avoid.

Let the user leave, and notify them

The most important UX decision for a minutes-long generation is to let the user leave. Nobody wants to watch a bar for several minutes, so the app should make clear they can close it and come back, then deliver a notification when the video is ready. That turns a frustrating wait into a background task: submit the prompt, leave, get pinged, return to the finished clip. Internally the app polls or subscribes for the result and posts the notification on completion, and the generation screen, if reopened, reflects the real current state rather than restarting a fake bar. This is the same leave-and-notify pattern behind a server-rendered AI lip-sync video player.

Building for departure rather than for staring is what makes a slow generator pleasant. The progress UI is a status, not a leash, and the push notification is what frees the user from it.

The approaches compared

The three approaches differ entirely in honesty.

Progress approachHonestyExperience
Fake percentage creeping to 100%Dishonest, an invented fractionFeels precise, then stalls or lies at the end
Queue position and elapsed timeHonest, no false precisionSets real expectations during the wait
Honest progress plus a push when doneHonest, and lets the user leaveThe best, no staring at a spinner

The fake percentage is the one to avoid. Honest queue-and-elapsed progress is the baseline, and adding a completion notification so the user can leave is the best experience. A free VP0 AI video progress template starts you there, with the queued, generating, and done states, the honest progress indicators, and the leave-and-notify flow already shaped and exposed through a machine-readable source page, so an agent like Cursor or Claude Code extends a real generation flow and you wire the generation API. The template handles the wait UX; you handle the model integration.

Handling failure and the finished video

A generation can fail, time out, or be rejected by a content filter, and the progress UI has to handle that as clearly as success. A failure state explains what happened and offers a retry rather than spinning forever or vanishing, and a content-policy rejection is communicated honestly rather than as a generic error. When the video is ready, the transition from progress to playback should be smooth, with the clip presented and clearly labeled as AI-generated where that matters. Costs deserve honesty too: if a generation consumes credits or money, show that before the user commits, not after, so they are never surprised by what a render cost.

These edges are where a generation app proves it respects the user. A clean failure with a retry, an honest cost shown up front, and a smooth hand-off to the finished video are what make the whole flow feel trustworthy rather than a slot machine.

Key takeaways: an AI video generation progress UI

  • It manages a slow, server-side wait. Generation runs remotely and takes minutes, so the UI cannot know an exact percentage.
  • Never fake a percentage. A creeping bar to 100% is dishonest and stalls or lies at the end.
  • Show what is real. Queue position, elapsed time, and the current stage, with indeterminate motion for activity.
  • Let the user leave and notify them. A completion push turns a wait into a background task.
  • Start from a progress template. A free VP0 AI video progress template gives an agent the states and leave-and-notify flow to wire an API into.

What to choose

For an AI video generation progress UI, build it around honesty and departure rather than a fake percentage, because the generation is slow, server-side, and not precisely measurable. A free VP0 AI video progress template gives you the queued, generating, and done states, honest progress indicators, and a leave-and-notify flow, so an agent extends a real generation experience and you wire the API, showing queue position and elapsed time instead of an invented fraction. A creeping percentage bar is the one approach to avoid, since it feels precise and then betrays the user at exactly the moment the video should appear.

Frequently asked questions

How do I build a Sora-style AI video generation progress UI in SwiftUI? Build it around honest signals, not a fake percentage, because the generation runs on a server and takes minutes with no precise progress to report. Show the queue position while the request waits, then an elapsed timer and the current stage once it starts, using indeterminate motion for activity rather than a creeping bar. Crucially, let the user leave the app and send a notification when the video is ready, so the wait becomes a background task. Handle failure with a clear retry. A free AI video progress template gives you the states and the leave-and-notify flow to start from.

Why should I not show a percentage for AI video generation? Because the app does not actually know how far along a server-side generation is, so any percentage is invented. A fake bar that creeps to 100% feels precise and then betrays the user, sitting at 99% or reaching 100% while the video is still rendering, which teaches people not to trust it. Generation pipelines rarely report a meaningful continuous percentage, so the honest approach is to show what you genuinely know, the queue position, the elapsed time, and the stage, rather than a fabricated fraction that will stall or lie.

Where can I get an AI video generation progress template? The most useful option is a template built for the honest, leave-able wait, not a generic progress bar. A free VP0 AI video progress template provides the queued, generating, and done states, honest progress indicators, and the leave-and-notify flow with a completion notification, plus a failure and retry state, with a machine-readable source page, so an agent like Cursor or Claude Code extends a real generation flow. You then wire the generation API, since the template is the wait experience and the model integration is yours. It is built for a minutes-long, server-side process rather than an instant operation.

How do I handle the long wait for AI video generation? Design for departure. Make clear the user can close the app and come back, then deliver a notification when the video is ready, turning the wait into a background task rather than a stare at a spinner. Internally, poll or subscribe for the result and post the notification on completion, and if the user reopens the screen, show the real current state instead of restarting a fake bar. This leave-and-notify pattern is what makes a slow generator pleasant, because nobody wants to watch a progress bar for several minutes.

What states does an AI video generation flow need? The honest ones across the whole wait: queued with a position, generating with an elapsed time and stage, a clear failure state with a retry, a content-policy rejection communicated honestly, and a smooth transition to the finished, AI-labeled video. It should also show any credit or money cost before the user commits, not after. These states are where a generation app earns trust, because a clean failure, an upfront cost, and an honest progress signal are what separate a respectful tool from one that feels like a slot machine.

What VP0 builders also ask

How do I build a Sora-style AI video generation progress UI in SwiftUI?

Build it around honest signals, not a fake percentage, because the generation runs on a server and takes minutes with no precise progress to report. Show the queue position while the request waits, then an elapsed timer and the current stage once it starts, using indeterminate motion for activity rather than a creeping bar. Crucially, let the user leave the app and send a notification when the video is ready, so the wait becomes a background task. Handle failure with a clear retry. A free AI video progress template gives you the states and the leave-and-notify flow to start from.

Why should I not show a percentage for AI video generation?

Because the app does not actually know how far along a server-side generation is, so any percentage is invented. A fake bar that creeps to 100% feels precise and then betrays the user, sitting at 99% or reaching 100% while the video is still rendering, which teaches people not to trust it. Generation pipelines rarely report a meaningful continuous percentage, so the honest approach is to show what you genuinely know, the queue position, the elapsed time, and the stage, rather than a fabricated fraction that will stall or lie.

Where can I get an AI video generation progress template?

The most useful option is a template built for the honest, leave-able wait, not a generic progress bar. A free VP0 AI video progress template provides the queued, generating, and done states, honest progress indicators, and the leave-and-notify flow with a completion notification, plus a failure and retry state, with a machine-readable source page, so an agent like Cursor or Claude Code extends a real generation flow. You then wire the generation API, since the template is the wait experience and the model integration is yours. It is built for a minutes-long, server-side process rather than an instant operation.

How do I handle the long wait for AI video generation?

Design for departure. Make clear the user can close the app and come back, then deliver a notification when the video is ready, turning the wait into a background task rather than a stare at a spinner. Internally, poll or subscribe for the result and post the notification on completion, and if the user reopens the screen, show the real current state instead of restarting a fake bar. This leave-and-notify pattern is what makes a slow generator pleasant, because nobody wants to watch a progress bar for several minutes.

What states does an AI video generation flow need?

The honest ones across the whole wait: queued with a position, generating with an elapsed time and stage, a clear failure state with a retry, a content-policy rejection communicated honestly, and a smooth transition to the finished, AI-labeled video. It should also show any credit or money cost before the user commits, not after. These states are where a generation app earns trust, because a clean failure, an upfront cost, and an honest progress signal are what separate a respectful tool from one that feels like a slot machine.

Part of the Native Apple & SwiftUI: The iOS Ecosystem hub. Browse all VP0 topics →

Keep reading

Build a Stock Market Heat Map Grid UI in SwiftUI: a glossy App Store icon on a blue, pink and orange gradient with bubbles
Guides 9 min read

Build a Stock Market Heat Map Grid UI in SwiftUI

A market heat map colors and sizes tiles by gain and market cap. Here is how to build the stock market heat map grid in SwiftUI, with an accessible color scale.

Lawrence Arya · June 9, 2026
Build a Booking.com-Style Availability Calendar in SwiftUI: a glossy App Store icon on a blue, pink and orange gradient with bubbles
Guides 8 min read

Build a Booking.com-Style Availability Calendar in SwiftUI

A Booking.com-style availability picker is more than a date picker. Here is how to build the availability calendar in SwiftUI, with real open and booked dates.

Lawrence Arya · June 8, 2026
Build a Sideloading iOS App Install Animation in SwiftUI: a glass iPhone UI wireframe icon on a holographic purple gradient
Guides 8 min read

Build a Sideloading iOS App Install Animation in SwiftUI

In the EU, an alt-marketplace install is a real, system-gated flow. Here is how to build the sideloading install animation in SwiftUI, honestly.

Lawrence Arya · June 8, 2026
Build a Smooth, Scrolling Social Media Feed in SwiftUI: a glass iPhone UI wireframe icon on a holographic purple gradient
Guides 6 min read

Build a Smooth, Scrolling Social Media Feed in SwiftUI

A social media feed in SwiftUI is a scrolling list of post cards. Here is how to build it so it stays smooth with images, likes, and infinite scroll.

Lawrence Arya · June 8, 2026
Build a Starlink Dish Alignment Compass UI in SwiftUI: a glossy App Store icon on a blue, pink and orange gradient with bubbles
Guides 6 min read

Build a Starlink Dish Alignment Compass UI in SwiftUI

A dish alignment compass aims an antenna using the phone's heading and tilt. Here is how to build the Starlink dish alignment compass UI in SwiftUI with two sensors.

Lawrence Arya · June 8, 2026
Use Apple Intelligence On-Device Models in SwiftUI: a reflective 3D App Store icon on a blue and purple gradient
Guides 6 min read

Use Apple Intelligence On-Device Models in SwiftUI

Apple Intelligence lets a SwiftUI app call an on-device model with the Foundation Models framework. Here is a working example, with the honest limits included.

Lawrence Arya · June 8, 2026