add loading-screen shiny app demo

index.html

@@ -68,6 +68,7 @@ <h3>Shiny apps and interactive docs currently hosted on this server:</h3>
         <li><strong><a href="./shinyjs-basic/">shinyjs basic app</a></strong> - a very basic Shiny app showing how <a href="https://github.com/daattali/shinyjs">shinyjs</a> functions can be used together in a simply app.</li> 
         <li><strong><a href="./request-basic-info/">Basic info form</a></strong> - a simple form that we used in a course to collect some basic information about students (example of how to use forms to collect data from a shiny app).</li>
         <li><strong><a href="./peer-review/">Peer review form</a></strong> - a marking sheet that we used in a course for students to peer-review other students' assignments (example of how to use forms to collect data from a shiny app).</li>
+        <li><strong><a href="./loading-screen/">Loading screen demo</a></strong> - an example of how to implement a simple loading screen in a Shiny app.</li>
       </ul>
       <br/>
       If you want to host a Shiny Server and/or RStudio Server yourself, <a href="http://deanattali.com/2015/05/09/setup-rstudio-shiny-server-digital-ocean/">here is a very well-received tutorial I've written on doing that</a>.

loading-screen/app.R

@@ -0,0 +1,45 @@
+library(shinyjs)
+
+appCSS <- "
+#loading-content {
+  position: absolute;
+  background: #000000;
+  opacity: 0.9;
+  z-index: 100;
+  left: 0;
+  right: 0;
+  height: 100%;
+  text-align: center;
+  color: #FFFFFF;
+}
+"
+
+shinyApp(
+  ui = fluidPage(
+    useShinyjs(),
+    inlineCSS(appCSS),
+
+    # Loading message
+    div(
+      id = "loading-content",
+      h2("Loading...")
+    ),
+
+    # The main app code goes here
+    div(
+      id = "app-content",
+      p("This is a simple example of a Shiny app with a loading screen."),
+      p("You can view the source code",
+        a(href = "https://github.com/daattali/shiny-server/blob/master/loading-screen",
+          "on GitHub")
+      )
+    )
+  ),
+  server = function(input, output, session) {
+    # Simulate work being done for 1 second
+    Sys.sleep(1)
+
+    # Hide the loading message when the rest of the server function has executed
+    hide(id = "loading-content", anim = TRUE, animType = "fade")    
+  }
+)