Import In Progress State
A panel for a running data import with a three step pipeline, a live progress bar, meta rows for timing, and notify or cancel actions.
A panel for a running data import with a three step pipeline, a live progress bar, meta rows for timing, and notify or cancel actions.
Search blocks by description or jump to a page.
The source for every Application block is included with Basic and Pro. Pick a plan to copy the code.
Already purchased? Log in
Import In Progress State is the holding panel shown while a data import runs. A FileSpreadsheet icon sits beside the heading Importing contacts.csv and an In progress badge, with a line promising the contacts appear the moment it finishes. A three step pipeline follows: upload marked complete and struck through, validating rows as the active step with a live row count and progress bar, and writing to the workspace still to come. A ruled meta list names the start time, the estimate, and where flagged rows go.
The progress value and meta rows are small consts, so the percentage and the timing facts each have one place to change. The pipeline uses filled, spinning, and hollow icons to mark done, running, and pending steps at a glance. The footer note makes the honest promise that closing the page never interrupts the import, flagged rows never block clean rows, and the review file is downloadable once validation finishes.
Reach for this block after a user starts an import that runs long enough to leave on screen, wired to your job status so the step, row count, and estimate update as the work progresses. Keep the promise that leaving the page is safe by running the import server side.
A natural flow around it on an Application Pro page:
Before
After
One strong use is the CSV contacts import. Other in progress states:
Tip: name the current step and show a real count rather than a bare spinner so people can tell the import is moving, not stuck.