Skip to content

Instantly share code, notes, and snippets.

@withr
Last active August 29, 2015 13:56
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save withr/8841810 to your computer and use it in GitHub Desktop.
Save withr/8841810 to your computer and use it in GitHub Desktop.
Busy indicator when switch tabs? Should not!
shinyServer(function(input, output) {
output$hist1 <- renderPlot({
n <- (input$obs)
dist <- NULL
for (i in 1:n) {
dist <- c(dist, rnorm(1))
}
hist(dist,main = paste("hist1", n), breaks = 100)
})
output$hist2 <- renderPlot({
n <- (input$obs)
dist <- NULL
for (i in 1:n) {
dist <- c(dist, rnorm(1))
}
hist(dist,main = paste("hist2", n), breaks = 100)
})
})
shinyUI(bootstrapPage(
# Add custom CSS & Javascript;
tagList(
tags$head(
tags$link(rel="stylesheet", type="text/css",href="style.css"),
tags$script(type="text/javascript", src = "busy.js")
)
),
div(class = "busy",
p("Calculation in progress..")
#,
#img(src="ajaxloaderq.gif")
),
div(class = "span4",
sliderInput("obs", "Number of observations:",
min = 10000, max = 90000,
value = 20000, step = 10000)
),
HTML('<ul class="nav nav-tabs">
<li class=""><a onclick= "showMe(\'#hist1\')" >Tab1</a></li>
<li class=""><a onclick= "showMe(\'#hist2\')" >Tab2</a></li>
</ul>'),
div(class = "output",
div(class = "tabSet",
plotOutput('hist1'),
plotOutput('hist2')
)
)
))
var i = 99;
setInterval(function(){
if (i == 99) {
if ($("div img").length > 1) {
$("div.tabSet > div").not("#hist1").hide();
i = 0;
}
}}, 10)
function showMe(id) {
$("div.tabSet > div").not(id).hide(); $(id).show();
}
setInterval(function(){
if ($('html').attr('class')=='shiny-busy') {
$('div.busy').show()
} else {
$('div.busy').hide()
}
},100)
div.busy {
position:absolute;
top: 40%;
left: 50%;
margin-top: -100px;
margin-left: -50px;
display:none;
background: rgba(200, 200, 200, .8);
text-align: center;
padding-top: 20px;
padding-left: 30px;
padding-bottom: 40px;
padding-right: 30px;
border-radius: 5px;
}
body {
margin:1cm;
font-size: 12px;
}
div.output {
overflow-y:hidden;
}
ul.nav-tabs {
overflow-y:hidden;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment