How can I make a simple loading screen?

[Dhrumil Patel]

I have built a Shiny app which takes around 5-8 seconds to render all of the appropriate information. What is the simplest way to design a loading scree/cover screen to overlay on top of the application for a few seconds. I have tried using JQuery but I am not sure where/how to place the HTML script so it will run/render on top of my application.

Any tips? Currently I have a HTML('  .... ') with the script embedded in my ui.R above my shinyUI() code. Is that the correct location? If not, where do I place a JQuery snippet to interact with the Shiny app correctly?

Thank you so much in advance!

[Dean Attali]

I have a simple example of how to make a loading screen on github as a very small shiny app

https://github.com/daattali/shiny-server/blob/master/loading-screen/app.R

You can see the result of that app here

http://daattali.com/shiny/loading-screen/

You might need to tweak when/where you call "hide('loading-content')" but the general idea should work.

This is just one way to do this, I hope to see different suggestions from other users

[Dhrumil Patel]

Here is an excerpt from my ui.R:

shinyUI(navbarPage("Capacity Forecasting System",

                   tabPanel("Capacity",style="height:1000px;",

                            tags$head((

                              tags$link(rel = "stylesheet", type = "text/css", href = "theme.css")

                            )),

                            

                            # Loading message

                            div(

                              id = "loading-content",

                              h1("Loading...")

                            ),

                            

                            fluidRow(style="width:1900px;",

                                     plotOutput("graph")

                            ),  

....

I am using the navbarPage layout and I would like to have my first tab covered while it loads. Right now I have a screen covering the tab (although some of my charts have been moved), but the screen isn't hiding. 

In my server.R: 

library(shinyjs)

shinyServer(function(input, output, session) {

  hide(id = "loading-content", anim = TRUE, animType = "fade")  

  

And my css:

#loading-content {

  font-family: 'Lobster', cursive;

  background: #000000;

  position: absolute;

  opacity: 1;

  z-index: 100;

  left: 0;

  right: 0;

  height: 100%;

  width: 100%;

  text-align: center;

  color: #FFFFFF;

}

Thank you for your feedback, hopefully you can help me once again.