daattali / shinycssloaders

⌛ Add loading animations to a Shiny output while it's recalculating
https://daattali.com/shiny/shinycssloaders-demo/
Other
395 stars 45 forks source link

How to use withSpinner with htmlTemplates? #23

Closed trafficonese closed 5 years ago

trafficonese commented 5 years ago

I have to write a Shiny-App with customized UI, so i had to use htmlTemplates as UI.

Now i am wondering how to include the withSpinnerfunction for some plots and table outputs.

None of the following works:

{{ withSpinner(plotlyOutput("plot") }}
{{ plotlyOutput("plot") %>%  withSpinner(color="green") }}

I included the following stylesheets in the HTML-head:

  <link rel="stylesheet" href="assets/spinner.css"/>
  <link rel="stylesheet" href="css-loaders/css/fallback.css"/>
  <link rel="stylesheet" href="css-loaders/css/load1.css"/>
  <style>
    #spinner-fb1379e50c4392487739d0e558462fa7, #spinner-fb1379e50c4392487739d0e558462fa7:before, #spinner-fb1379e50c4392487739d0e558462fa7:after {background: green}
    #spinner-fb1379e50c4392487739d0e558462fa7 {color: green}
    </style>
  <style>
    #spinner-fb1379e50c4392487739d0e558462fa7 {font-size: 8px}spinner-fb1379e50c4392487739d0e558462fa78
    </style>
  <style>#spinner-5cc0e652b276e0d0a0f3fbc6a51ab991, #spinner-5cc0e652b276e0d0a0f3fbc6a51ab991:before, #spinner-5cc0e652b276e0d0a0f3fbc6a51ab991:after {background: green}
  #spinner-5cc0e652b276e0d0a0f3fbc6a51ab991 {color: green}
  </style>
  <style>
    #spinner-5cc0e652b276e0d0a0f3fbc6a51ab991 {font-size: 8px}spinner-5cc0e652b276e0d0a0f3fbc6a51ab9918
  </style>

Am i missing something or is that just not possible for now?

trafficonese commented 5 years ago

I figured it out. Nothing has to be added to the head tag. It will include the scripts and stylesheets automatically.

jordancampbell23 commented 2 years ago

@trafficonese Do you mind explaining a bit more or providing an example. I am running into the same issue.