šŸ“£ Dash Loading States

Me too! Is a fix being worked on?

Some updates on this aspect of the loading states (ā€œper-component loading statesā€)

  1. An organization has funded this development work :heart: You can track the progress here: A Flexible "Loading Status" API for Component Authors Ā· Issue #267 Ā· plotly/dash Ā· GitHub
  2. In the interim, @caiyij came up with an interesting solution for per-component loading states in pure-dash here: :raised_hands: In a plotly dash app, how to show a default text value in a div upon each click (on a dropdown, or button, etc) until the div is populated? - #5 by caiyij
2 Likes

Hi @mikesmith1611,

How can I make use of your spinner?
I tried simply replacing Chris code pen by yours like:
app.css.append_css({ā€œexternal_urlā€: ā€œhttps://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.cssā€})

However, this is not showing me the spinner.
Also, would it be possible to specify where the spinner should appear? I would like it to appear on top of the current graph while the heavy data processing is happening in the background.

Thanks!

Since this thread started there is now a much easier way to add custom css to your dash app:

https://dash.plot.ly/external-resources

Currently, when a callback is loading there is one Div that is over-layed across the web page to indicate loading. It is therefore best to display the loading spinner in the center of the screen.

1 Like

For some reason this simply doesnā€™t work for me. I installed dash renderer 0.9.0, and appended both of the external CSS files along with Bootstrap. I have several long-running callbacks, but no grayed-out state pulls up. Does this functionality still exist?

EDIT: The example does not show the loading state either. All of the functionality works, but the screen does not gray-out when an option is selected and the callback is running. Iā€™m in the latest version of Chrome (70).

When I apply the external css it fades and it remains than that, after the data was already loaded. and how this can be implemented on a local application?. I created a custom css on my app and I referenced the css locally but it does not seems to work. Am I missing something?

See Adding CSS & JS and Overriding the Page-Load Template | Dash for Python Documentation | Plotly for the latest instructions on how to include local CSS.

Thanks, now is working, but on some calls the ā€œUpdatingā€ title does not go away, even after I return data from the callback function, Any Idea why this can be happening?

Great news! A customer has stepped up and sponsored the development of this feature (Consulting, Training & Open-Source Development) :heart: :tada:

We have published a preliminary version of this feature, try it out and give us some feedback here: šŸ“£ Loading states API and a Loading component prerelease

4 Likes

This is great, thanks.
I did
external_stylesheets = ['https://codepen.io/chriddyp/pen/bWLwgP.css', 'https://codepen.io/chriddyp/pen/brPBPO.css']

app = dash.Dash(__name__, external_stylesheets=external_stylesheets)

and it works.

1 Like

Thanks! This example works great. However, my callback takes around 20 minutes! I would really like to display the python console output so the user will have some idea about whatā€™s going on. Is there a way to perhaps update the text message in your solution to show the console output during the callback?

1 Like

Thanks a lot for the post

I have a page with scroll bar, this CSS only hazes off(freezes) half of the page. If I scroll down the down-half page is editable. Can we increase length of this CSS or lock the scroll bar?

try modifying the height parameter. i think i originally used vh units, which would cause this issue. percents might be better, absolute positioning too.

1 Like

Hi @mikesmith1611 ,
Thanks for sharing your loading state! I have a dash application with multiple links to different graphs. Is there anyway to set this loading state to one specific links page? Currently it shows on all pages. Thanks!

Check out the new dash loading component. It makes things like this a lot easier!

https://dash.plot.ly/dash-core-components/loading_component

4 Likes

So if in a particular code I dont want to have the temporary shaded view and I dont want to have any giff, what can I put and where? (I dont want to see plotly graphs shading while being updated dinamically)

sorry just a little bit confused, the literature gives example to add temporary .GIFF , but none to remove the shade

Has anyone thought of including a way to make the Loader delay its custom animation? I encountered a situation in my app where the graph of interest that I want to wrap with dcc.Loading sometimes take ~5 seconds to load, and sometimes ~0.01 seconds to load, and I obviously would want the former to display the ā€œloadingā€ animation, and not the second one.

Would an idea for some flexibility in that regard be good? I imagine maybe two tiers of loading, one for a quick update, and one for an update lasting a longer time, would be quite intuitive?

2 Likes

interesting site ofr gif

Is there any way to have a loading box which is always triggered if something is loading, without replacing the components content?

2 Likes