How to make a progress bar pop up and disappear during indeterminate process after button click

[CP-Vub]

How to make a progress bar pop up and disappear during indeterminate process after button click

[tcbegley]

I've created a self-contained example of this here. Since it requires some backend infrastructure I decided to create a separate repo rather than put everything in the examples folder of this repo.

You can see the example deployed here (note I'm not paying for the deployment, so the limited resources might mean it is a bit slow to load or something).

The example lets you type a string into a dbc.Textarea, then when you click the button it iterates slowly over the characters one by one, converting them to upper case. This long running task is handled by a task queue and a background worker. The progress is cached in Redis and used to update a dbc.Progress component back in the app layout.

Give me a shout if anything is unclear. I have a few ideas for improving / simplifying it, but it works as is for now. I'm also going to work separately on an example for getting a progress bar while uploading files which works a little differently to this.

[tcbegley]

Since there's clearly a lot of interest in this I'll prioritise coming up with a clean example demonstrating how this can be done.

[happyshows]

@tcbegley Since the loading component is officially out, could you create a minimal example on how to load a large csv file / downloading a file utilizing progress bar? Thanks

[tcbegley]

Hi @RayPalmerTech

Really glad to hear you're enjoying dash-bootstrap-components!

This sort of thing can be a bit fiddly in Dash. It's going to be easier in the future I think with the new loading states api and Loading component that was previewed in December.

If you want to do something more manually with Progress, you have to do it asynchronously. I.e. start your query with one callback, then periodically check for completion on an interval and do something when the query is complete. As a starting point you might find this comment useful.

More generally you could look at using some kind of task queue like celery or redis-queue (rq). I've used the latter successfully before in a Dash app, and found this blog post helpful when setting it up. It's written for Flask apis rather than Dash callbacks, but the same principles apply.

Sorry I couldn't give you something more concrete to work with, but hopefully some of those links will be a useful starting point.

[CaseGuide]

Hooray! @tcbegley

[toddkarin]

This works, but seems unnecessarily complicated. A future suggestion would be to have an Output() style function that can be called in the middle of a callback. This is how other GUI software works, e.g. Matlab.

[CaseGuide]

@tcbegley I would also really like an example. We're having this exact problem. We use RQ to process our functions/files but would like to use the Progress bar to indicate how that process is coming.

@happyshows

[CaseGuide]

Thank you, this looks perfect. Added integrating a progress bar to our next sprint. @tcbegley

[tcbegley]

I'm going to close this for now, but feel free to reopen if you need any of the above clarified.

[Awrad-Emad]

@chriddyp I would appreciate if you can provide an example as I have a similar problem.