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.
Then in javascript, I use jquery cause its shorter
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;
}
});
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.
Example:
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.
Fixes:
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.
@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.
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.
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!
