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
If the answer addresses your question, please [accept it](https://stackoverflow.com/help/someone-answers); doing so not only provides a little perk to the answerer with some points, but also provides some closure for readers with similar questions. Though you can only accept one answer, you have the option to up-vote as many as you think are helpful. (If there are still issues, you will likely need to edit your question with further details.) (Also please consider going to past questions with answers. Thank you.) — r2evans, Sep 04 '20 at 02:55

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