📣 Dash Loading States

Dash Python
23

@chriddyp thanks for the nice solution, I have added the following lines to my code

Dash CSS
app.css.append_css({“external_url”: “https://codepen.io/chriddyp/pen/bWLwgP.css”})

Loading screen CSS
app.css.append_css({“external_url”: “https://codepen.io/chriddyp/pen/brPBPO.css”})

Everything works, but I always get an error message:

ERROR in app: Exception on /_dash-update-component [POST]
Traceback (most recent call last):
…
raise ValueError(msg.format(_type=type(filepath_or_buffer)))
ValueError: Invalid file path or buffer object type: <class ‘NoneType’>

Maybe someone could tell me how to solve this problem?

24

Thank you @chriddyp for the solution.

I’m writing an interface for a couchbase db and it’s foundamental to guarantee an acceptable UI.

It seems that now (0.11+ version of dash renderer) the overlay div is added only at application loading, while not on following callbacks triggered by user interaction.

Could you please tell me if this is intended to work this way or not?
What do you think can be the cause?

Thanks in advance for your time.

2 Likes
25

This was huge! I just tried it and it works perfectly

This will be greatly appreciated by my dashboard users

26

As this is global level change, where is <div class="_dash-loading-callback"/> injected in the html, under <div id="_dash-app-content"/> or another (hidden?) html element?

27

I have the same issue regarding the loading states : It works perfectly when launching the application but when a new callback is triggered by the user via a Button, the loading states does not appear…

28

Me too! Is a fix being worked on?

29

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
30

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!

31

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
32

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

33

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?

34

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.

35

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?

36

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
37

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
38

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
39

Thanks a lot for the post

40

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?

41

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
42

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!