Add 'Calculation In Process' Indicator for Shiny Application

A Calculation in process busy indicator for shiny application is useful especially for the application that take long time to calculate result. I used to developed an application do model fitting which need more than 10 seconds! Users may lose their patience if the application doesn’t response after several seconds!

One solution is add a process bar, take a look of the threads in Shiny Google Group and Stackoverflow. The shortcoming of a process bar is you need to give the arguments min and max values, which for a lot of application is not available. Here I share a simple method add a busy indictor when calculation is undergoing.

Take a look of the html source of a Shiny application which need some time to calculate result, we can find the <html> tag has a class named “shiny-busy” when the calculation is under going and disappear when calculation is finish. So, the simple idea comes out: write JavaScript code to monitor the class of <html>, if the class equal to “shiny-busy”, then show a busy indictor (gif picture), otherwise hide the indictor!

Create a busy indictor div in “ui.R”:

div(class = "busy",  
    p("Calculation in progress.."), 
    img(src="ajaxloaderq.gif")
)

Include the JavaScript in head:

tagList(
  tags$head(
    tags$link(rel="stylesheet", type="text/css",href="style.css"),
    tags$script(type="text/javascript", src = "busy.js")
  )
)

Here is the souce code for “busy.js”:

setInterval(function(){
  if ($('html').attr('class')=='shiny-busy') {
    $('div.busy').show()
  } else {
    $('div.busy').hide()
  }
},100)

We can also use “style.css” to makeup busy indictor’s appearance:

div.busy { 
  position:absolute;
  top: 40%;
  left: 50%;
  margin-top: -100px;
  margin-left: -50px;
  display:none;
  background: rgba(230, 230, 230, .8);
  text-align: center;
  padding-top: 20px;
  padding-left: 30px;
  padding-bottom: 40px;
  padding-right: 30px;
  border-radius: 5px;
}

Here is the source code and demo.

Written on January 3, 2014