0

I am using shinycssloaders to show loading animation. There are multiple inputs on the page which are loaded from the server. These inputs are also dependent on each other.

In the below example I have used a reactive object to create such dependency. First the table is displayed and only when the calculation of table is completed (rv$a <- 1) plot can be completed.

library(shiny)
library(shinycssloaders)

ui <- fluidPage(
    withSpinner(tableOutput('data')),
    withSpinner(plotOutput('plot'))
)

server <- function(input, output) {
  rv <- reactiveValues(a = NULL)
  
  output$data <- renderTable({
    #Some long calculation here, using Sys.sleep for simplicity
    Sys.sleep(2)
    rv$a <- 1
    head(mtcars)
  })
  
  output$plot <- renderPlot({
    req(rv$a)
    #Some long calculation here, using Sys.sleep for simplicity
    Sys.sleep(2)
    plot(rnorm(100), rnorm(100))
  })
}

shinyApp(ui, server)

This works fine but it shows 2 loaders, one for table and other one for plot. I want to combine these 2 loaders and show only 1 loading animation which covers the entire page combining table and plot. Also loading should end only after all the calculation is done i.e after plot calculation.

I have tried putting table and plot in a div and use spinner on div but it did not work and gave a blank page.

ui <- fluidPage(
  withSpinner(div(
    tableOutput('data'),
    plotOutput('plot')
  ))
)

Does anybody have a solution to this? Is this possible using some different package?

user16024709
  • 151
  • 1
  • 12

1 Answers1

1

You can use the tagList() function, which creates a list of the tags allowing the shinycssloaders package to wrap all the inputs within it in one go.

So the ui will look like the following:

ui <- fluidPage(
  withSpinner(tagList(tableOutput('data'),
          plotOutput('plot')))
)

Just some extra information for the animation. You can all change the style of the animation such as the the type, color, size , etc by adding these as arguments to the withSpinner(). Check the withSpinner() RDocumentation.

Sahib
  • 160
  • 8
  • Thanks, this works for the example shared but in my actual example I am not able to make it work. In my real example, there are many more components in `ui` which I put in`tagList` but spinner doesn't show up. Do you know if there is any limit on components that can be included in `tagList` ? Nonetheless, thank you for your help. I'll ask a new question if I am not able to resolve it by myself. – user16024709 Jul 06 '21 at 06:53