As a quick workaround, your global dash app container get the CSS class ._dash-loading-callback when updating its content. You might have look at 📣 Dash Loading States to see if you could use this.
Otherwise, if I understand your app correctly, I would create following callbacks:
- Set_loading_status:
- Input: button, n_clicks
- Output: status_div, children
- Start_long_process:
- Input: button, n_clicks
- Output: graph, figure
- Update_loading_status:
- Input: graph, figure
- Output: status_div, children
This way, 1 and 2 are fired together, and 3 is fired when 2 is completed. You would put both “loading” and the animation in status_div (hard to be more explicit without some proper MWE).
(This might be a bit more difficult as 1 and 3 have the same output — and I think I remember you cannot have two callbacks with the same output (for the moment). If it’s actually the case, you should create one global callback with both 1 & 3 triggers, retrieve which trigger fired the callback, and set output accordingly.)
You can show/hide the graph using CSS (display: none or visibility: hidden, depending on what you want to achieve). You would then need a 1bis and 3bis callbacks that have the same inputs, and use graph, style (or — preferably — graph, className if you use proper CSS).