Use `shinycssloaders::withSpinner` to cover more than one input - r

Question

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?

Answer 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.