Black Lives Matter. Please consider donating to Black Girls Code today.

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?