Manual dcc.Loading component

Right now, a dcc.Loading component is in the ‘Loading’ state while the components that it wraps are waiting for a response from the server. Looking at the source code, the description is:

“A Loading component that wraps any other component and displays a spinner until the wrapped component has rendered.”

In my use-case, I would like to enable and disable this component manually based on context. Some responses from the server are fast enough that the ‘loading’ animation just flashes so it should be disabled then, but for longer-lasting responses (it is known from context which responses will be long or short) it should be enabled.

Does anyone know if there’s a 3rd party component that solves this problem, or if there’s a work-around with the existing component? It takes the ‘is_loading’ dictionary which is a lead but even playing around with it I can’t find the right workflow.

Hello @jkunstle,

Yes, you can trigger displaying manually of a loading spinner, although it is more tricky than just the regular use case.

For example, I have a spinner called “hex-loading”, in the javascript I tell it when to hide and when to show. I have no children associated with it.

1 Like

Hey @jinnyzor!

That’s great info, would you mind please linking me to a page that supports that? I’d love to learn from how you did it.

Sure, here you go:


Example of it in code:

                              svg="<object data='../assets/hex-loading.svg' type='image/svg+xml'"
                                  " style='position: relative; top: -50px;"
                                  "height: 95%; width: 95%;'></object>",

You’ll have to mess around with the style in order to get it in the right spot.


#hex-loading {
        top: 0px;
        height: 100vh;
        width: 100vw;
        position: absolute;
        z-index: 900;
        background-color: rgba(255,255,255,0.7);

Then in javascript, I use jquery cause its shorter :wink: :stuck_out_tongue:

window.fetch = new Proxy(window.fetch, {
    apply(fetch, that, args) {
        // Forward function call to the original fetch
        const result = fetch.apply(that, args);

        // Do whatever you want with the resulting Promise
        result.then((response) => {

            if (args[0] == '/_dash-update-component') {
                if (meetscriteria) { $("#hex-loading").hide() }

        return result;

Then whenever you want to show it:

1 Like

This is very exciting to see, we’ve been hoping to find something like this for a while.

Which project is this a part of? We’re hoping to find examples of more sophisticated apps written with Dash so we can learn from the design-patterns that they implement, and it seems like code like this would have to come from a project that’s more sophisticated from a Javascript perspective than our own.


Sorry, its nots open-source… And its not completed either. I dont know if anything else is out there which approaches it the same way, I’ve kinda pulled it together from different sources as I’ve learned.

The biggest hurdle to get over, is understanding the issue between the need to synchronization between the server and the client.

If you manipulate a dom via JS on the client side, you cannot update the dom from the server side any more. Neither can you see the new information on the server.

Do clientside callbacks that query the new information to pass it along, the new data cannot be used as the input, but rather a button and then inside the javascript function, you pull the updated info and pass it to the response.

This applies to anything you’ve manipulated, dcc.Stores, graphs, etc. I’ve even had a graph stop getting updates because I added an event listener for plotly_click and plotly_select. :stuck_out_tongue:

1 Like

Also, one other thing to keep in mind, its built upon flask, so you can do some stuff with the flask side as well.

1 Like

@jinnyzor is describing some cool stuff - but back to @jkunstle 's original question, if you are using the dash-bootstrap-components library, you could try the dbc.Spinner – it has these two props that might help:

delay_hide (number; default 0): When using the spinner as a loading spinner, add a time delay (in ms) to the spinner being removed to prevent flickering.

delay_show (number; default 0): When using the spinner as a loading spinner, add a time delay (in ms) to the spinner being shown after the loading_state is set to True.

1 Like

This info will undoubtedly come in handy once our app is a bit more sophisticated, thanks so much for taking the time to describe your solution and the other fixes you’ve had to Dash problems.

Yes absolutely, ultimately that’s going to be our next learning path- how to customize the boilerplate Dash experience with our own Flask-centric logic.

If you already use Flask, you can import that flask app as the server for the dash app.

1 Like

Oh that’s an excellent idea, one could absolutely use this to delay-show for an arbitrarily long time for some cases, and to 0 for other cases. Thanks so much for the lead!

Oh very interesting, I’ll look for some examples of that design pattern, that sounds very useful.