withSpinner with div in Shiny - shiny

Question

So far I successfully made a Shiny dashboard that makes a user select from the first dropdown and a second dropdown dependent on the first. Functionality-wise everything works well except for the UI part marked in star (*) in my script. What I want is the following two:
Make the second dropdown appear right next to the first and not below which can be accomplished by:
div(style="display:inline-block; vertical-align:top; margin-left: 20px", uiOutput("var_dropdown2"))
Make the second dropdown have a loading spinner once the first dropdown is selected:
uiOutput("var_dropdown2") %>% withSpinner(type = 6)
Both 1 and 2 work but when I try to combine these two it won't:
div(style="display:inline-block; vertical-align:top; margin-left: 20px", uiOutput("var_dropdown2") %>% withSpinner(type = 6))
How can I achieve the both?
Here is the fully working script:
#### Packages
library(dplyr)
library(shiny)
library(shinyWidgets) # pickerInput()
library(shinycssloaders) # withSpinner()
#### UI
ui <- fluidPage(
mainPanel(
### Dropdown 1
div(
style="display:inline-block; vertical-align:top; margin-left: 20px",
pickerInput(
"var_dropdown1",
"Dropdown 1:",
choices = c("Sepal", "Petal"),
multiple = T
)
),
### Dropdown 2
uiOutput("var_dropdown2") %>% withSpinner(type = 6) # Works without div()
# div(style="display:inline-block; vertical-align:top; margin-left: 20px", uiOutput("var_dropdown2")) # Works without withSpinner()
# div(style="display:inline-block; vertical-align:top; margin-left: 20px", uiOutput("var_dropdown2") %>% withSpinner(type = 6)) # Doesn't work if using both div() and withSpinner() *
)
)
#### Server
server <- function(input, output, session) {
### Dropdown 2
dropdown2 <- reactive({
if (length(input$var_dropdown1) == 1) {
if (input$var_dropdown1 == "Sepal") {
c("Sepal.Length", "Sepal.Width")
}
else {
c("Petal.Length", "Petal.Width")
}
}
else {
c("Sepal.Length", "Sepal.Width", "Petal.Length", "Petal.Width")
}
})
## renderUI
output$var_dropdown2 <- renderUI({
req(input$var_dropdown1)
pickerInput(
"var_dropdown2",
"Dropdown 2:",
choices = dropdown2(),
multiple = T
)
})
}
####
shinyApp(ui=ui, server=server)

Answer 1

One possible solution is to use cloumn layout:
ui <- fluidPage(
mainPanel(
### Dropdown 1
fluidRow(
column(
6,
pickerInput(
"var_dropdown1",
"Dropdown 1:",
choices = c("Sepal", "Petal"),
multiple = T
)
),
column(
6,
uiOutput("var_dropdown2") %>% withSpinner(type = 6)
)
)
)
)
However, we can see the loader is not positioned in the right location as the dropdown. This is hard to achieve with shinycssloaders package. To do so, we can use some advanced loaders.
#### Packages
library(dplyr)
library(shiny)
library(shinyWidgets) # pickerInput()
library(spsComps)
#### UI
ui <- fluidPage(
mainPanel(
### Dropdown 1
div(
style="display:inline-block; vertical-align:top; margin-left: 20px",
pickerInput(
"var_dropdown1",
"Dropdown 1:",
choices = c("Sepal", "Petal"),
multiple = T
)
),
### Dropdown 2
div(
id = "dropdown2_container",
style="display:inline-block; vertical-align:top; margin-left: 20px; min-height: 50px; min-width: 250px",
uiOutput("var_dropdown2")
)
)
)
#### Server
server <- function(input, output, session) {
### Dropdown 2
dropdown2 <- reactive({
if (length(input$var_dropdown1) == 1) {
if (input$var_dropdown1 == "Sepal") {
c("Sepal.Length", "Sepal.Width")
}
else {
c("Petal.Length", "Petal.Width")
}
}
else {
c("Sepal.Length", "Sepal.Width", "Petal.Length", "Petal.Width")
}
})
## renderUI
dd_loader <- spsComps::addLoader$new(target_selector = "dropdown2_container")
output$var_dropdown2 <- renderUI({
dd_loader$show()
on.exit({dd_loader$hide()})
req(input$var_dropdown1)
Sys.sleep(1)
pickerInput(
"var_dropdown2",
"Dropdown 2:",
choices = dropdown2(),
multiple = T
)
})
}
####
shinyApp(ui=ui, server=server)
Attaching loaders from spsComps takes a few more steps, but it allow you to have complete control of the loader, when to display, when to hide, change loader type, position, size and more dynamically, etc.
In this case, the loader is attached to the outside div instead of the uiOutput directly, because the height and width is subject to change when new UI is rendered inside var_dropdown2. The outside container is not usually modified by renderUI.