How to add a CSS spinner

[gshotwell]

We don't currently have a great loading indicator when long-running computations cause components to take a long time to run. A user asked for a simple CSS spinner similar to shinyloaders, and we put together a simple example of how to get this sort of behaviour.

The basic pattern is to define a function which wraps children in a div, and then use CSS to add a spinner when that class is recalculating.

[stephenwilliams22]

@gshotwell Thanks for adding this example. However, when I add this spinner to an interactive plot, https://shiny.posit.co/py/docs/outputs.html#interactive-plots-1 for example, it seems to completely interfere with the interactivity of the plot. For example hovering gives no information in the plotly plot. Same with altair. Do you have suggestions on how to update this to not interfere with interactive plots?

[iainmwallace]

It also interferes with click events on a table

[iainwallacebms]

In case it is helpful, I have created an example that shows this issue here

Two issues with this approach are:

1. The spinner is only displayed when a selection is made
2. The plot is not interactive anymore

Per a suggestion, I added an additional css snippet for not recalculating but unfortunately that didn't help

[cpsievert]

We now have spinners by default, and you can customize them via ui.busy_indicators.options()