dcc.Loading Not Working with Long Function Calls

[matt-buckley]

I have a function that is takes quite a while to run due to needing to both load in large datasets from an online database and then process said data to generate a graph. Function looks like this:

@app.callback(
    Output('figure', 'value'),
    Output('loading-icon-1', 'children'),
    # Series of Inputs
)
def function(args):
    df = import_df(args)
    # Processing
    # Create fig
    return fig, ''

When working with smaller datasets this all works fine, but when loading in larger datasets the loading function does not seem to display at all until import_df() has completed and we’re back in function(). Could anyone with more familiarity with how dcc.Loading works explain this, and perhaps how to fix it? import_df() is in it’s own function as it’s re-used elsewhere, yet it seems like calling import_df() might be the cause of the issue - I’d rather not have to repeat code by duplicating the contents of import_df() in function().

[jinnyzor]

Hello @matt-buckley,

Two things, you could change this callback to a background=True callback, and provide feedback as it processes.

Background Callbacks | Dash for Python Documentation | Plotly

Second, if you dont want the info to refresh until refresh, you could store the data on the clientside or serverside depending upon your needs. Then all subsequent calls will use the dcc.Store instead of re-querying the data.

Store | Dash for Python Documentation | Plotly

[matt-buckley]

Thanks very much! Sadly dcc.Store doesn’t work for my use case as the datasets are just too large to be supported, but background callbacks look like a good idea. However, the install instruction, pip install dash[diskcache], doesn’t seem to work for me?

[jinnyzor]

@matt-buckley

pip install dash[diskcache]

Think it should be:

pip install "dash[diskcache]"

[jinnyzor]

Also, take a look at the ServerSideOutput under dash-extensions.

Show and Tell - Server Side Caching

The Store component in Dash makes it easy to share state between callbacks. Under the hood, the data are stored as JSON in the browser. This approach is chosen to keep the server stateless (i guess), but it has a few drawbacks As the data are stored in JSON, you must convert objects from/to JSON in the beginning/end of each callback Since the callbacks are executed server side while the data are stored client side, the data will be sent across the wire every time a callback is invoked The maxi…

Dash Extensions

[matt-buckley]

Thanks, this worked for installation! Sadly it seems using a background callback displays exactly the same behaviour as a regular one - could this be down to the background manager default settings? Server-side caching is definitely something I’ll look into, but I don’t think would affect the Loading behaviour I’m seeing at the moment.

[jinnyzor]

It would mean that you dont have to renew the info every single time, just on demand.

After you run it once, subsequent callbacks could use the previously cached info. There isnt much we can do about the long function, but you can make it so it executes in the background, and you can still use the site. Plus, you can offer feedback through the lifecycle of the function if needed.

[matt-buckley]

Yeah I think it could well be quite useful in reducing loading times, thanks. I’ll see if there are any improvements to dcc.Loading I could add based on this, as it seems that the loading icon is created asynchronously, which is why it sometimes isn’t created until much later if another function is called.