FlexDashboard - spinner? And/or detecting page events

[slodge]

I'm writing lots of FlexDashboard apps at the moment - they're quick and fun to write.

To give an indication of "busy" while data loads I'm using a "spinner" based on https://stephanwagner.me/only-css-loading-spinner

I can get this to show using the shiny recalculating class:

<style>
@keyframes spinner {
  to {transform: rotate(360deg);}
}

.recalculating:before {
  content: '';
  box-sizing: border-box;
  position: absolute;
  top: 50%;
  left: 50%;
  width: 20px;
  height: 20px;
  margin-top: -10px;
  margin-left: -10px;
  border-radius: 50%;
  border: 2px solid #ccc;
  border-top-color: #000;
  animation: spinner .6s linear infinite;
}
</style>

This solution works really well within a page.

However, it doesn't work so well across pages - when a user clicks between pages, then the shiny binding logic is what tells the chart shims to update - so there isn't a recalculating event to hook into.

Can anyone suggest any way to hook into the page change events in Flex/Shiny - or to hook into the Shiny binding refresh mechanism (when a shim becomes visible) - if there was some way to set another class when that happens it'd make adding spinners much easier.

Open to all ideas really!