Shiny Dashboard - displays a special page "loading .." until the initial data loading

Question

I have an initial loading of data from the database into server.R , which takes a few seconds. Until this is done, the displayed page will be distorted (incorrect data in the selection field and strange arrangement of boxes, see below).

I want to display another page (or at least different content on the first tab) until the data is fully loaded.

I was thinking of making some kind of conditionalPanel using a condition based on the selected global variable (initial_loading_done), but wherever I tried to place the conditionalPanel , this did not work.

This is the structure of my UI.R:

 shinyUI( dashboardPage( dashboardHeader(title = "Title"), dashboardSidebar( sidebarMenu( menuItem("Tab1", tabName = "Tab1",icon = icon("dashboard")), menuItem("Tab2", tabName = "Tab2", icon = icon("bar-chart-o")) ) ), dashboardBody( includeCSS("custom_css.css"), tabItems( tabItem(tabName = "Tab1", fluidRow(<content>), mainPanel( fluidRow(<content>) ) ), tabItem(tabName = "Tab2", fluidRow(<content>), mainPanel( dataTableOutput('my_data_table') ) ) ) ) ) ) 

Answer 1

Here is a very simple example using shinyjs package

The idea is to create a “download” page and a content page under different identifiers, first create a hidden content page and use show() and hide() after the application is ready

 library(shiny) library(shinyjs) load_data <- function() { Sys.sleep(2) hide("loading_page") show("main_content") } ui <- fluidPage( useShinyjs(), div( id = "loading_page", h1("Loading...") ), hidden( div( id = "main_content", "Data loaded, content goes here" ) ) ) server <- function(input, output, session) { load_data() } shinyApp(ui = ui, server = server) 

Answer 2

In server I like to use reactiveValues() to store the setupComplete condition. Then, when the data loads, my setupComplete set to TRUE .

In ui we can evaluate this setupComplete conditionalPanel in a conditionalPanel and display only the content (in my example there are three box() widgets).

Here is a working example

 ## app.R ## library(shiny) library(shinydashboard) library(shinyjs) ui <- dashboardPage( dashboardHeader(), dashboardSidebar(), dashboardBody( actionButton(inputId = "btn_data", label = "Download"), conditionalPanel(condition = "output.setupComplete", box( title = "box1" ), box( title = "box2" ), box( title = "boc3" ) ), conditionalPanel(condition = "!output.setupComplete", box( title = "loading")) ) ) server <- function(input, output) { rv <- reactiveValues() rv$setupComplete <- FALSE ## simulate data load observe({ if(input$btn_data){ df <- data.frame(id = seq(1,200), val = rnorm(200, 0, 1)) ## Simulate the data load Sys.sleep(5) ## set my condition to TRUE rv$setupComplete <- TRUE } ## the conditional panel reads this output output$setupComplete <- reactive({ return(rv$setupComplete) }) outputOptions(output, 'setupComplete', suspendWhenHidden=FALSE) }) } shinyApp(ui, server) 

Answer 3

Code

 hidden( div( id = "main_content", "Data loaded, content goes here" ) 

not working with tabsetPanel. But if you moved id to div level, it works great. Thanks to shinyjs author Dean Attali for this tip. https://stackoverflow.com/users/4432127/keshete

  hidden( div(id = "mainTabsetPanel", tabsetPanel( ....