Progress bar does not work with rAmCharts in shiny apps with flexdashboard

[enric]

The progress bar from shinycssloaders does not work with rAmCharts in shiny apps with flexdashboard.
It shows the progress bar but then the plot is not displayed.

The progress bar works when the shiny app is not done with flexdashboard.

Below there is a reproducible example:

---
title: "Progress bar with rAmCharts"
output: 
  flexdashboard::flex_dashboard:
    orientation: rows
    includes:
      in_header: "cssloaders_in_header.html"
runtime: shiny
---

```{r setup, include=FALSE}
knitr::opts_chunk$set(echo = FALSE)
library(shinyjs)
library(shinycssloaders)
library(rAmCharts)

Charts

Row {.tabset}

Here the output is displayed without spinner

amChartsOutput(outputId = "amchart")

output$amchart <-renderAmCharts({
     
      iris <- get(x = "iris", pos = "package:datasets")
      
      amBoxplot(iris[, -5])
    })

Here the output is NOT displayed with spinner

withSpinner(amChartsOutput(outputId = "amchart2"))

output$amchart2 <-renderAmCharts({
     
      iris <- get(x = "iris", pos = "package:datasets")
      
      amBoxplot(iris[, -5])
    })

and this is the content of the cssloaders_in_header.html file:

.load1 .loader, .load1 .loader:before, .load1 .loader:after { background: #ffffff; -webkit-animation: load1 1s infinite ease-in-out; animation: load1 1s infinite ease-in-out; width: 1em; height: 4em; } .load1 .loader { color: #ffffff; text-indent: -9999em; margin: 88px auto; position: relative; font-size: 11px; -webkit-transform: translateZ(0); -ms-transform: translateZ(0); transform: translateZ(0); -webkit-animation-delay: -0.16s; animation-delay: -0.16s; } .load1 .loader:before, .load1 .loader:after { position: absolute; top: 0; content: ''; } .load1 .loader:before { left: -1.5em; -webkit-animation-delay: -0.32s; animation-delay: -0.32s; } .load1 .loader:after { left: 1.5em; } @-webkit-keyframes load1 { 0%, 80%, 100% { box-shadow: 0 0; height: 4em; } 40% { box-shadow: 0 -2em; height: 5em; } } @keyframes load1 { 0%, 80%, 100% { box-shadow: 0 0; height: 4em; } 40% { box-shadow: 0 -2em; height: 5em; } } .shiny-spinner-output-container { position: relative; } .load-container { position: absolute; top: 50%; -webkit-transform: translateY(-50%); transform: translateY(-50%); /* to avoid showing a vertical scrollbar http://stackoverflow.com/questions/38251204/horizontal-animation-causes-vertical-scrollbar-in-css */ overflow:hidden; width: 100%; } .shiny-spinner-hidden { position: absolute; top:0; left:0; z-index: -1; visibility:hidden; } .load1 .loader, .load1 .loader:before, .load1 .loader:after {background: #0275D8} .load1 .loader {color: #0275D8} .load1 .loader {font-size: 8px}

<script>
(function() {
  var output_states = [];
  function show_spinner(id) {
    $("#"+id).siblings(".load-container, .shiny-spinner-placeholder").removeClass('shiny-spinner-hidden');
    $("#"+id).siblings(".load-container").siblings('.shiny-bound-output, .shiny-output-error').css('visibility', 'hidden');
    // if there is a proxy div, hide the previous output
    $("#"+id).siblings(".shiny-spinner-placeholder").siblings('.shiny-bound-output, .shiny-output-error').addClass('shiny-spinner-hidden');
  }
  function hide_spinner(id) {
    $("#"+id).siblings(".load-container, .shiny-spinner-placeholder").addClass('shiny-spinner-hidden');
    $("#"+id).siblings(".load-container").siblings('.shiny-bound-output').css('visibility', 'visible');
    // if there is a proxy div, show the previous output in case it was hidden
    $("#"+id).siblings(".shiny-spinner-placeholder").siblings('.shiny-bound-output').removeClass('shiny-spinner-hidden');
  }
  function update_spinner(id) {
    if (!(id in output_states)) {
      show_spinner(id);
    }
    if (output_states[id] <= 0) {
      show_spinner(id);
    } else {
      hide_spinner(id);
    }
  }
  $(document).on('shiny:bound', function(event){ 
    /* if not bound before, then set the value to 0 */
      if (!(event.target.id in output_states)) {
        output_states[event.target.id] = 0;
      }
    update_spinner(event.target.id);
  });
  /* When recalculating starts, show the spinner container & hide the output */
    $(document).on('shiny:outputinvalidated', function(event) {
      output_states[event.target.id] = 0;
      update_spinner(event.target.id);
    });
  /* When new value or error comes in, hide spinner container (if any) & show the output */
    $(document).on('shiny:value shiny:error', function(event) {
      output_states[event.target.id] = 1;
      update_spinner(event.target.id);
    });
}());