Shiny中如何同时实现二级下拉框横向排列与加载Spinner效果？

问题描述 #

已开发完成的Shiny仪表盘包含主下拉框和依赖于它的二级下拉框，功能正常。但同时实现以下两个UI效果时失效：

• 通过div设置使二级下拉框与主下拉框横向排列
• 通过withSpinner为二级下拉框添加加载动画

单独实现任一效果均可行，两者结合时失效。

解决方法 #

问题根源在于DOM组件的嵌套顺序错误。正确的做法是将添加了加载动画的uiOutput完整放入设置了横向排列样式的div容器中，确保样式能作用到包含加载动画和下拉框的整个组件。

修改UI部分的二级下拉框代码如下：

### Dropdown 2
div(
  style="display:inline-block; vertical-align:top; margin-left: 20px",
  uiOutput("var_dropdown2") %>% withSpinner(type = 6)
)

完整可运行代码 #

#### 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
    div(
      style="display:inline-block; vertical-align:top; margin-left: 20px",
      uiOutput("var_dropdown2") %>% withSpinner(type = 6)
    )
  )
)


#### 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)

原理说明 #

withSpinner会为uiOutput生成一个包含加载动画的父容器，将这个容器放入设置了display:inline-block的div中，能确保整个带加载动画的组件和主下拉框保持横向排列，同时加载动画会在二级下拉框渲染时正常显示。

内容的提问来源于stack exchange，提问作者shsh