Does anyone have any idea how to implement a progress indicator for a long-running callback?
I was trying to hack something using animated gif and toggling hidden state, but with not luck…
something like this: http://mathieudutour.github.io/react-progress-button/
I think that loading states should be something that is built-in (and customizable) through Dash rather than through a complex set of Input/Output callbacks and components.
I think that the loading state should be customizable on a per-element and on a per-app basis. So, you could either add a loading state to the entire app (e.g. grey out the app between updates) or add a loading state to an individual element (e.g. add a loading spinner to a single output element or a single input element).
I’ll start working on this within the next week or so. If anyone has any feedback, requests, opinions or examples to share, please speak up!
One thing that might be tricky is figuring out how preventing the loading state from “flashing” in and out of the UI. Animations might help here. For example, if a callback takes only 100ms or even 500ms, then you might not need to show a loading state (otherwise the loading state could flash in and out really quickly). Do we leave this up to the users to determine when to show the loading state? Or do we just design nice loading states that ease in and out with animations? Or do we time how long the requests take and then only display the loading state if the previous request took less than e.g. 500ms?
Chris, in my opinion this should be configurable to avoid unnecessary flashing. As an API user, I would probably like to control this in a callback, since inside callback I can check whether necessary data is available in cache or needs to be computed. i can do a workaround with a callback chain, if this is a property of an element. But definitely needs to be controlled- most of my updates are within 50ms
Hi Chris,
Just started playing around with Dash and I’m very impressed with everything so far, great work!
The website I am building has certain steps that can take several minutes to potentially a couple hours depending on the data size. I am interested in some sort of quantitative progress bar that can give users an idea how long the process will take. Is there any way this can be implemented with current Dash tools?
I’m also looking for some sort of upload button for user to upload their data to the website. Is this something that might be implemented soon?
Thanks!
Check out this solution here: Asynchronous logic · Issue #57 · plotly/dash · GitHub. It uses a dcc.Interval to continuously check the “status” of the process and the long process itself writes its status to the file system.
Working on it, it’ll be available soon!
Thanks, this was really helpful!
I’m running into a problem where running multiple processes simultaneously is messing with assignment of my global variables that I use across different functions. Any way to get around this?
@jyhsu - Setting global variables in Dash isn’t safe as the memory isn’t shared across processes. In general, it is not safe to mutate data outside of the scope of a callback!
You have a couple options:
Published a preliminary solution for app-wide loading-screens while callbacks are running: 📣 Dash Loading States