Announcing Dash Bio 1.0.0 🎉 : a one-stop-shop for bioinformatics and drug development visualizations.

Conditional loading spinner strategies?

We have a page constructed that uses a handful of input fields to run a fairly slow operation. Because of that, we have a submit button, so the user fills in the dropdowns for A, B, and C, and then hits a SUBMIT button, at which point a graph is constructed.

At first, I created a callback with A, B, and C as state elements, the SUBMIT button as an input element, and loading and graph elements as output, so changing A, B, or C wouldn’t trigger the loading animation, but clicking the SUBMIT button would. This almost works, however…

It put me in the position that someone could change A, B, or C and the graph would stay in place, making it easy to mistakenly associate your new inputs with the old graph. If I change A, B, and C to be input elements in the callback (instead of state elements) and simply have the graph be cleared with any non-SUBMIT input, the stale graph problem goes away, but now the fullscreen loading icon flickers briefly whenever anybody changes any of the inputs.

Is there a recommended approach here? Any common patterns I’m failing to consider?

Were you able to solve this issue? I sounds to be like you could use dash.callback_context inside a callback for this, where you clear the graph if any value is updated, and only update it if submit is selected.