Loading Page in R shiny for a fixed amount of time

Question

How do I add a loader page while my UI populates with computations on my dataset inside the server function? My UI populates with values in about 30 secs. So I want this loader page to show for 30 secs and then hide it to show my actual UI which would have filled up by then.

Any help would be appreciated. Here's the sample code below:

ui <- fluidPage(
  useShinyjs(),
  div(
    id = "loading_page",
    h1("Loading...")
  ),

  titlePanel("XYZ"),
  sidebarLayout(
    sidebarPanel(
      
      p("Lorem Ipsum"),
      
      selectInput(inputId = "ab", label = "SelectSomething", choices = c("A","B","C","D")),
      p("Please Wait for 30 secs for data to load.."),
      sliderInput(inputId = "Age", label = "Age Range", min=16, max=45, value=c(16,45)), 
        actionButton(inputId = "update", label = "Go!")
    ),
    mainPanel(
      h3("ABC:"),
      uiOutput("table"),
      br(),
      uiOutput("OP1"),
      br(),
      uiOutput("OP2"),
      uiOutput("OP3"),
      br(),
      uiOutput("OP4") 
    )
  )
)


dataset<-readRDS(file = "my_data.rds")  

server <- function(input, output, session) {

})

Without testing, I think you can add an `observe` using `invalidateLater` that uses `removeUI` or whatever is needed to remove the loader overlay. — r2evans, Aug 26 '20 at 18:59
Hey, could you share some code showing how to do that? @r2evans — Aakash, Aug 26 '20 at 19:12
If you check the code above, I've added a div with id 'loading_page' and a h1 heading for the div. — Aakash, Aug 27 '20 at 16:30
Sorry, I was looking for something with CSS and/or fancy stuff, didn't realize that that was the placeholder. My bad! — r2evans, Aug 27 '20 at 16:46

r2evans · Accepted Answer · 2020-08-27T17:00:53.767

It appears that you are using code from https://stackoverflow.com/a/35665217/3358272, which makes this a dupe of sorts, but perhaps not in the vein of: how to do that with more UI components.

Just wrap all of your title and sidepanel stuff in hidden(div(...)) with an id.

From there, you can allow other things to do some work by using a reactive observe block that fires twice: the first time it sets a wake-up alarm (3000 milliseconds here), the second time it removes the #loading_page div.

ui <- fluidPage(
  useShinyjs(),
  div(
    id = "loading_page",
    h1("Loading...")
  ),
  hidden(
    div(
      id = "main_content",
      titlePanel("XYZ"),
      sidebarLayout(
        sidebarPanel(
          p("Lorem Ipsum"),
          selectInput(inputId = "ab", label = "SelectSomething", choices = c("A","B","C","D")),
          p("Please Wait for 30 secs for data to load.."),
          sliderInput(inputId = "Age", label = "Age Range", min=16, max=45, value=c(16,45)), 
          actionButton(inputId = "update", label = "Go!"),
          ),
        mainPanel(
          h3("ABC:"),
          uiOutput("table"),
          br(),
          uiOutput("OP1"),
          br(),
          uiOutput("OP2"),
          uiOutput("OP3"),
          br(),
          uiOutput("OP4")
        )
      )
    )
  )
)
server <- function(input, output, session) {
  already_started <- FALSE
  observe({
    if (already_started) {
      removeUI("#loading_page")
    } else {
      invalidateLater(3000, session)
      already_started <<- TRUE
    }
  })
}

It would also be "right" to use a reactiveVal for already_started. The reason I didn't was that we don't need reactivity from it, just a two-shot memory.

Loading Page in R shiny for a fixed amount of time

1 Answers1