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

[CP-Vub]

I am wondering how I could use the Progress component to implement an indeterminate progress bar that shows up when I click a button (which is meant to update a graph) and disappears when the graph is loaded.

The reason I ask this is because I have an application where a button-click is supposed to retrieve data from a database, which can take an unknown amount of time. During that waiting period I would like to see the progress bar.

I can kind of simulate an indeterminate progress bar by setting the value to 100 from the start and setting animated to True. But I am having difficulties making the progressbar appear right before the data retrieval and disappear right after.

Do you have any idea or suggestions how to tackle this problem?

PS: I discovered the Dash Bootstrap Components module last week and I've been absolutely loving it. It makes the job of developing a good modern looking dashboard so much easier, so thank you to its developers really!

[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.

[tcbegley]

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

[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

[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

[Awrad-Emad]

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

[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.

[CaseGuide]

Hooray! @tcbegley

[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.

[CaseGuide]

Thank you, this looks perfect. Added integrating a progress bar to our next sprint. @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.