Loading screen and navbarPage

Question

I try to make a loading screen as in this nice example http://daattali.com:3838/loading-screen/. Unfortunately I cannot figure out how to do exactly the same effect with 'navbarPage'.

In this slightly modified app below there are two tab panels called "start" and "end". When the app starts none of the tab panels are active. One have to quickly click on the first tab to see the loading screen but this is not what I would like. Is there a way to make it so quick and easy as in the mentioned example?

Thank you for the help!

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 = navbarPage(
    useShinyjs(),
    inlineCSS(appCSS),

    tabPanel(title = "Start",

      # 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",
          tags$a(href = 'https://github.com/daattali/shiny-server/blob/master/loading-screen',
            "on GitHub")
        )
      )
    ),

    tabPanel(title = "End",
             h2("Second tab"))
  ),

  server = function(input, output, session) {
    # Simulate work being done for 1 second
    Sys.sleep(2)

    # Hide the loading message when the rest of the server function has executed
    hide(id = "loading-content", anim = TRUE, animType = "fade")    
  }
)

EDIT: The original link to the loading screen app has been taken down. It can now be accessed on github here

Answer 1

Well, I believe that you will enjoy with this solution but it is not perfect. The key is the tagList, you can add whatever you want before the navbar.

Furthermore I add the padding to your CSS code and now, there is a title in the navbar.

Unfortunately the navbarPage is not possible to hide of a not complex way.

library(shiny)
library(shinyjs)

appCSS <- "
#loading-content {
position: absolute;
padding: 10% 0 0 0;
background: #000000;
opacity: 0.9;
z-index: 100;
left: 0;
right: 0;
height: 100%;
text-align: center;
color: #FFFFFF;
}
"

shinyApp(
  ui =
      tagList(
        useShinyjs(),
        inlineCSS(appCSS), 
      # Loading message
      div(
        id = "loading-content",
        h2("Loading...")
      ),
    navbarPage("Test",
    tabPanel(title = "Start",

             # 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",
                 tags$a(href = 'https://github.com/daattali/shiny-server/blob/master/loading-screen',
                        "on GitHub")
               )
             )
    ),

    tabPanel(title = "End",
             h2("Second tab"))
    ) #close navbarPage
    ), #close tagList
  server = function(input, output, session) {
    # Simulate work being done for 1 second
    Sys.sleep(5)

    # Hide the loading message when the rest of the server function has executed
    hide(id = "loading-content", anim = TRUE, animType = "fade")    
  }
)