CODEWITHSUNDEEP
rshinyshinyjs
Hallucigeniak
Hallucigeniak

Reputation: 155

R Shiny: Prevent cssloader from showing until action button is clicked

I want to show a cssloader spinner while some processing is done. The cssloader must be shown only after an actionButton is clicked, which triggers the processing of data (this step requires some time, simulated by the sys.Sleep() function in the example below). Also, I want it to show everytime this action is triggered by the actionButton, not only the first time.

Here is an example of what I'm trying:

library(shiny)
library(shinycssloaders)

ui <- fluidPage(
   titlePanel("CSS loader test"),

   sidebarLayout(
      sidebarPanel(
         selectInput("imageOptions", "Choose an image:", choices = list(option1="RStudio-Logo-Blue-Gradient.png", option2="RStudio-Logo-All-Gray.png")),
         actionButton("getImage", "Show image:")
      ),

      mainPanel(
         withSpinner(uiOutput("logo"))
      )
   )
)

server <- function(input, output) {
  url<-reactive(
   paste0("https://www.rstudio.com/wp-content/uploads/2014/07/", input$imageOptions)
   )

  observeEvent(input$getImage,{
    output$logo<-renderText({
      URL<-isolate(url())
      print(URL)
      Sys.sleep(2)
      c('<center><img src="', URL, '"width="50%" height="50%" align="middle"></center>')
    })
  })

}
# Run the application 
shinyApp(ui = ui, server = server)

Upvotes: 4

Views: 2695

Answers (1)

Hallucigeniak
Hallucigeniak

Reputation: 155

I bet there are better ways to acomplish what I needed but here is a solution:

library(shiny)
library(shinycssloaders)

ui <- fluidPage(
  titlePanel("CSS loader test"),

  sidebarLayout(
    sidebarPanel(
      selectInput("imageOptions", "Choose an image:", choices = list(option1="RStudio-Logo-Blue-Gradient.png", option2="RStudio-Logo-All-Gray.png")),
      actionButton("getImage", "Show image:")
    ),

    mainPanel(
      withSpinner(uiOutput("logo"))
    )
  )
)

server <- function(input, output) {
  url<-reactive(
    paste0("https://www.rstudio.com/wp-content/uploads/2014/07/", input$imageOptions)
  )
  output$logo<-renderText({
    validate(need(input$getImage, "")) #I'm sending an empty string as message.
    input$getImage
      URL<-isolate(url())
      print(URL)
      Sys.sleep(2)
      c('<center><img src="', URL, '"width="50%" height="50%" align="middle"></center>')
  })
}
# Run the application 
shinyApp(ui = ui, server = server)

Instead of getting the reactivity with a call to observeEvent the working solution is to use a call to validate(need(input$getImage, "")) inside a render function.

Upvotes: 4

Related Questions