The app that I’m working on does relatively large data transactions in the background including database queries and response processing. As a result, I’m working on polishing my graph loading animations so that the user is aware that something is happening in the background when they press a button.
Right now all of the associated graph cards are wrapped in a dcc.Loading component. I’ve looked around for alternatives to this component but all of these other options seem to have the same trigger: once the loading html state of the loading component (the graph) is set, then the loading spinner / background translucency are set. In practice, this means that the button that triggers the DB query doesn’t immediately set the state of the graphs to loading. This makes total sense, the loading parameter shouldn’t be set because of this, but I want to override this behavior in the interest of styling.
This would be fine if setting the “graph loading” parameter was a first-class operation, i.e. I could set it w/ a graph callback when I start a query. However, I haven’t found a way to do so. Therefore I want to “promote” it to this state by changing the styling to a “loading state” shimmer of some kind (a spinner would also be fine but I don’t like that as much, it’s less nice looking to me).
tl;dr: I want to set the [data-dash-is-loading=“true”] html property (which triggers a loading animation) in a callback or do something that mimics this. Any suggestions on customizing this behavior would be very appreciated.
I’ve faced a similar problem, but wasn’t really able to solve it in a (very) proper way. In my case, I was using chained callbacks, e.g. after pressing a button, data was fetched from the DB which was then returned to a dcc.Store component, which then triggered a callback creating the graphs.
What helped me was to put the dcc.Store inside the dcc.Loading component (alongside the dcc.Graph components). That way, the first callbacks propagates the loading state of dcc.Store to the dcc.Loading component. The second callback then propagates the loading state of dcc.Graph to the dcc.Loading component.
Downside of this solution: There’s a (short) window where the dcc.Loading animation stops between the two callbacks.
I haven’t really found a way to propagate the loading state across chained callbacks - so if anyone has a better solution, please let us know!
This would be a good fix for me if I was able to put the dcc.Store at that level- the data used in that object is used across other callbacks for other graphs on the same page so it might work for one but not other graphs.
My hope would be that we can set that styling manually- rather than using the dcc.Loading component, we could just set the styling for a loading widget on the card / graph until a replacement graph was created that didn’t have that styling.
This might be a case where the solution is a bit more experience with CSS, and if that seems to be the case I’ll update this thread so that others can take advantage of that chosen solution.