How to implement a progressbar in index.html using Shiny when a long calculation is performed

Question

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

Answer 1

As I understand your question, you want to have a progress bar running until server.R posts back to your page?

One possible solution to this is using your own custom bindings. You will want to hide your progress bar when output$sampleSize() is finished, so we will bind an output binding to that. Output bindings are explained in the Shiny documentation.

You need to give your output div a new class instead of shiny-text-output e.g.:

<div id="sampleSize" class="sampler"></div>

Now the binding (add this code in as an external .js script or on the page in script tags):

var some_binding = new Shiny.OutputBinding();
$.extend(some_binding, {
  find: function(scope) {
    return $(scope).find('.sampler');
  },
  renderValue: function(el, data) {

    // Populate your div with output.
    $(el).text(data);

    // Hide your progress bar.
    $('#progressbar').hide();

  }
});

Shiny.outputBindings.register(some_binding, "someone.some_binding");

Now as sampleSize is being given a value to display the progress bar also gets hidden. This is highly untested but the general method should work.