SaaS Loading States: Tell Users When Work Is Really Finished

When a SaaS application displays a loading state, it's essential to inform users about the process, whether they can continue interacting, and what to do next. Success should only be conveyed when the expected outcome is achieved. Consider an app that imports a contact list. The browser may finish uploading the file while the server continues validating the data.

Displaying a premature "Done" message would be misleading. Instead, label each stage clearly, such as "Uploading file," "Checking rows," and "Adding contacts." Keep these labels close to the action or result they describe. Percentages are only necessary when representing measurable work; otherwise, use straightforward labels like "Waiting to start."

For progress bars, refer to the native HTML progress element or use an indeterminate progress bar when no current numeric value is available. Define what "finished" means for your app. In the import example, success could be defined as "The accepted contacts are saved and available in the contact list." Offer distinct states for waiting, in progress, fully finished, requiring attention, and failure, each with a clear next action.

If closing the page is safe, provide an import history page with the latest status. Explain whether leaving the page is safe, especially during uploads. Update the message to reflect the server's acceptance once the upload is running. Replaying an active job with an empty screen offers no useful information. Ensure status changes are accessible to screen readers by using appropriate roles or properties.

Test various scenarios, including slow connections, failed requests, reloads during processing, and jobs with invalid rows. Verify that the screen provides truthful information and safe next steps. Clearly state the final result, such as "190 contacts added. Review 10 rows," so users understand the progress and remaining tasks.