Show Elapsed Time in shiny process

server.R

library(shiny)

shinyServer(function(input, output) {
  
  output$intense <- reactivePrint(function() {
    if(input$panel==2){
      Sys.sleep(10)
      return('Finished')
    }else({return(NULL)})
  })
  
})

timer.js

<script type="text/javascript">
var wasBusy = false;
var elapsedTimer = null;
var startTime = null;
function updateBusy() {
  var isBusy = $('html').hasClass('shiny-busy');
  if (isBusy && !wasBusy) {
    startTime = new Date().getTime();
    elapsedTimer = setInterval(function() {
      var millisElapsed = new Date().getTime() - startTime;
      $('#progress').text(Math.round(millisElapsed/1000) + ' seconds have elapsed');
    }, 1000);
  }
  else if (!isBusy && wasBusy) {
    clearInterval(elapsedTimer);
  }
  wasBusy = isBusy;
}
</script>

ui.R

library(shiny)

shinyUI(pageWithSidebar(
  
  # Application title
  headerPanel("Testing..."),
  
  sidebarPanel(
    helpText("Panel compute is where I wish for a 'progress bar' to show how much
             time has elapsed.")
  ),

  mainPanel(
    
    tabsetPanel(
      tabPanel("Start",value=1),
      tabPanel("Compute", list(
        ### long function
        verbatimTextOutput("intense")),
      value=2),id='panel'),
    ### show timer
    conditionalPanel("updateBusy() || $('html').hasClass('shiny-busy')",
      id='progressIndicator',
      "HI I'M IN PROGRESS",
      div(id='progress',includeHTML("timer.js"))
    ),
    tags$head(tags$style(type="text/css",
      '#progressIndicator {',
      '  position: fixed; top: 8px; right: 8px; width: 200px; height: 50px;',
      '  padding: 8px; border: 1px solid #CCC; border-radius: 8px;',
      '}'
    ))
  )
  
))

In the .js file you could change #progress to .progress, and then in ui.R instead of div(id='progress' it could be div(class='progress'. Then you could include the .js file just once, but have multiple copies of the conditionalPanel, one for each tab.

by Joe Cheng