title: How to implement a progressbar in index.html using Shiny when a long calculation is performed
body: <p>I am trying to implement something like a progress bar to use while the value of some function is being estimated. The function takes a long time to process. Is there any way to send some indicator from server.R that the function is completed, so I could hide the progress bar in index.html file. My code is as follows:</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;head&gt;
  &lt;script src="shared/jquery.js" type="text/javascript"&gt;&lt;/script&gt;
  &lt;script src="shared/shiny.js" type="text/javascript"&gt;&lt;/script&gt;
  &lt;link rel="stylesheet" type="text/css" href="shared/shiny.css"/&gt;
  &lt;/head&gt;
  &lt;body onload="progressbar.style.display='none';"&gt;
  &lt;table&gt;&lt;tbody&gt;
       &lt;tr&gt;
          &lt;td align="right" &gt;&lt;label&gt;Sample Input:&lt;/label&gt;&lt;/td&gt;
          &lt;td&gt;&lt;input type="text" id="ns" value="10" title="Sample Size"&gt;&lt;/td&gt;
       &lt;/tr&gt;
       &lt;tr&gt;
          &lt;td align="right" &gt;&amp;nbsp;&lt;/td&gt;
          &lt;td&gt;&lt;input class="button" type="submit" id="calc" name="calc" value="Calculate"  onclick="progressbar.style.display='block';"&gt;&lt;/td&gt;
       &lt;/tr&gt;
       &lt;tr&gt;
          &lt;td align="right" &gt;&amp;nbsp;&lt;/td&gt;
          &lt;td&gt;&amp;nbsp;&lt;/td&gt;
       &lt;/tr&gt;
       &lt;tr&gt;
          &lt;td align="right" &gt;&lt;label id="result"&gt; Power:&lt;/label&gt;&lt;/td&gt;
          &lt;td &gt;&lt;div id="sampleSize" class="shiny-text-output" &gt;&lt;/div&gt;&lt;/td&gt;
       &lt;/tr&gt;
       &lt;tr&gt;
          &lt;td align="right" &gt;&amp;nbsp;&lt;/td&gt;
          &lt;td&gt;&lt;progress id="progressbar" value="50" max="100" &gt;&lt;/progress&gt; &lt;/td&gt;
       &lt;/tr&gt;
    &lt;/tbody&gt;&lt;/table&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>My server.R file looks like this:</p>
  
  <pre><code>library(shiny)
  shinyServer(function(input, output) {
  data &lt;- reactive({
      ns&lt;-as.numeric(input$ns)
  })
  
  ## set variable on loading the page
  firstTime &lt;- TRUE
  
  # Generate an output
  output$sampleSize &lt;- renderText({
  
   ## get the data
   data&lt;-data()
   if (!firstTime) {
  
      ## execute some long function
      Sys.sleep(5)
  
      ## return the output value from the above function
      return(as.character(data[1]))
   }
   else{
      firstTime&lt;&lt;-FALSE ## supress output on loading the page
      return(NULL)
   }
  })
  })
  </code></pre>