Problem when combining shinycssloaders with shinyjs

[ghost]

This is a print screen of a case. The above plot (plot1) is "withSpinner". It is hidden by code like the following :

    observeEvent(.....
    if(nrow(plot1_df())<1){
      hide("plot1")
    }
    ......

However, the animation never dissapears! What is more, it's div lays "above" the tab panels, preventing the choice of another tab! I could do nothing but stop using "withSpinner"

[daattali]

This is similar to https://github.com/daattali/shinycssloaders/issues/35 but that issue was when using conditionalPanel() instead of shinyjs. That was easy to resolve because with conditionalPanel, the entire HTML block that contains both the plot and the loader animation gets hidden. With shinyjs, the plot gets hidden, but the loader animation is not.

Anyway, the solutoin is to wrap the plot in a div() and hide that div, not the plot (that way, the loader is also hidden with shinyjs).

Example:

library(shiny)

ui <- fluidPage(
  shinyjs::useShinyjs(),
  actionButton("hide", "hide"),
  actionButton("go", "go"),
  div(id = "plot_container",
      plotOutput("plot") %>% shinycssloaders::withSpinner()
  )
)

server <- function(input, output, session) {
  observeEvent(input$hide, shinyjs::toggle("plot_container"))

  output$plot <- output$plot2 <- renderPlot({
    input$go
    Sys.sleep(1)
    plot(rnorm(100))
  })
}

shinyApp(ui, server)