R shiny: display "loading..." message while function is running

user1603038 picture user1603038 · Jun 26, 2013 · Viewed 28.3k times · Source

I use Shiny GUI R package. I'm looking for a way to display a message like "loading..." after the actionButton was pressed. The function takes several minutes to execute, so I need to inform the user somehow that the button actually triggered some event. Now the server.R code looks like this:

DATA <- reactive({
  if(input$DownloadButton>0) {
    RunDownload()
  } else {
    NULL
  }
})

output$Download <- renderText({
  if(NROW(DATA())>0) {
    paste0(Sys.time(),": ",NROW(DATA()), " items downloaded")
  } else {
    ''
  }
})

actionButton() is a function that downloads data from internet. input$DownloadButton is actionButton. So after the button was pressed the user waits for several minutes and only then sees a message saying that download was successful. I would like to show a message "Loading..." just after the actionButton was pressed and then another message like paste0(Sys.time(),": ",NROW(DATA()), " items downloaded") when execution ends.

Answer

user1603038 picture user1603038 · Mar 18, 2014

I'm already using a simpler and more reliable way than the one I posted before.

A combination of

tags$style(type="text/css", "
           #loadmessage {
             position: fixed;
             top: 0px;
             left: 0px;
             width: 100%;
             padding: 5px 0px 5px 0px;
             text-align: center;
             font-weight: bold;
             font-size: 100%;
             color: #000000;
             background-color: #CCFF66;
             z-index: 105;
           }
  ")

with

conditionalPanel(condition="$('html').hasClass('shiny-busy')",
                 tags$div("Loading...",id="loadmessage")
)

Example:

runApp(list(
  ui = pageWithSidebar(
      headerPanel("Test"),
         sidebarPanel(
           tags$head(tags$style(type="text/css", "
             #loadmessage {
               position: fixed;
               top: 0px;
               left: 0px;
               width: 100%;
               padding: 5px 0px 5px 0px;
               text-align: center;
               font-weight: bold;
               font-size: 100%;
               color: #000000;
               background-color: #CCFF66;
               z-index: 105;
             }
          ")),
           numericInput('n', 'Number of obs', 100),
           conditionalPanel(condition="$('html').hasClass('shiny-busy')",
                            tags$div("Loading...",id="loadmessage"))
         ),
         mainPanel(plotOutput('plot'))
  ),
  server = function(input, output) {
    output$plot <- renderPlot({ Sys.sleep(2); hist(runif(input$n)) })
  }
))

tags$head() is not required, but it's a good practice to keep all the styles inside head tag.