title: Show that Shiny is busy (or loading) when changing tab panels
body: <p>(Code follows after problem description)</p>
  
  <p>I am working on making a web app with Shiny, and some of the R commands that I am executing take minutes to complete. I found that I need to provide the user with some indication that Shiny is working, or they will continuously change the parameters I provide in the side panel, which just causes Shiny to reactively restart the calculations once the initial run is completed.</p>
  
  <p>So, I created a conditional panel that shows a "Loading" message (referred to as a modal) with the following (thanks to Joe Cheng on the Shiny Google group for the conditional statement):</p>
  
  <pre><code># generateButton is the name of my action button
  loadPanel &lt;- conditionalPanel("input.generateButton &gt; 0 &amp;&amp; $('html').hasClass('shiny-busy')"),
                                loadingMsg)
  </code></pre>
  
  <p>This is working as intended if the user remains on the current tab. However, the user can switch to another tab (that may contain some calculations that need to be run for some time), but the loading panel appears and disappears immediately, all while R chugs away at the calculations, and then refreshing the content only after it is done.</p>
  
  <p>Since this may be hard to visualize, I provided some code to run below. You will notice that clicking the button to start the calculations will produce a nice loading message. However, when you switch to tab 2, R starts running some calculations, but fails to show the loading message (maybe Shiny does not register as being busy?). If you restart the calculations by pressing the button again, the loading screen will show up correctly. </p>
  
  <p>I want the loading message to appear when switching to a tab that is loading!</p>
  
  <p><strong>ui.R</strong></p>
  
  <pre><code>library(shiny)
  
  # Code to make a message that shiny is loading
  # Make the loading bar
  loadingBar &lt;- tags$div(class="progress progress-striped active",
                         tags$div(class="bar", style="width: 100%;"))
  # Code for loading message
  loadingMsg &lt;- tags$div(class="modal", tabindex="-1", role="dialog", 
                         "aria-labelledby"="myModalLabel", "aria-hidden"="true",
                         tags$div(class="modal-header",
                                  tags$h3(id="myModalHeader", "Loading...")),
                         tags$div(class="modal-footer",
                                  loadingBar))
  # The conditional panel to show when shiny is busy
  loadingPanel &lt;- conditionalPanel(paste("input.goButton &gt; 0 &amp;&amp;", 
                                         "$('html').hasClass('shiny-busy')"),
                                   loadingMsg)
  
  # Now the UI code
  shinyUI(pageWithSidebar(
    headerPanel("Tabsets"),
    sidebarPanel(
      sliderInput(inputId="time", label="System sleep time (in seconds)", 
                  value=1, min=1, max=5),
      actionButton("goButton", "Let's go!")
    ),
  
    mainPanel(
      tabsetPanel(
        tabPanel(title="Tab 1", loadingPanel, textOutput("tabText1")), 
        tabPanel(title="Tab 2", loadingPanel, textOutput("tabText2")) 
      )
    )
  ))
  </code></pre>
  
  <p><strong>server.R</strong></p>
  
  <pre><code>library(shiny)
  
  # Define server logic for sleeping
  shinyServer(function(input, output) {
    sleep1 &lt;- reactive({
      if(input$goButton==0) return(NULL)
      return(isolate({
        Sys.sleep(input$time)
        input$time
      }))
    })
  
    sleep2 &lt;- reactive({
      if(input$goButton==0) return(NULL)
      return(isolate({
        Sys.sleep(input$time*2)
        input$time*2
      }))
    })
  
    output$tabText1 &lt;- renderText({
      if(input$goButton==0) return(NULL)
      return({
        print(paste("Slept for", sleep1(), "seconds."))
      })
    })
  
    output$tabText2 &lt;- renderText({
      if(input$goButton==0) return(NULL)
      return({
        print(paste("Multiplied by 2, that is", sleep2(), "seconds."))
      })
    })
  })
  </code></pre>