R Shiny多tabPanel中waiter组件显示异常问题求助

问题根源：未激活的TabPanel中的输出元素初始处于隐藏状态（display: none），Waiter无法正确获取其DOM位置与尺寸，导致加载动画固定在页面左上角。

方案1：为每个输出创建独立Waiter实例并按需触发 #

为表格和图表分别创建独立的Waiter对象，在各自的渲染函数中触发加载动画。这样当切换到对应Tab后，输出元素处于可见状态，Waiter能正确计算居中位置。

修改后的完整代码：

library(shiny)
library(highcharter)
library(shinythemes)
library(waiter)

ui <- fluidPage(
  theme = shinytheme("cyborg"),
  useWaiter(),
  actionButton("draw", "render stuff"),
  fluidPage(
    tabsetPanel(
      tabPanel("Table", tableOutput("table")),
      tabPanel("Chart", highchartOutput("hc"))
    )
  )
)

server <- function(input, output){
  
  # 为每个输出创建独立的Waiter实例
  w_table <- Waiter$new(id = "table")
  w_hc <- Waiter$new(id = "hc")
  
  dataset <- reactive({
    input$draw
    Sys.sleep(8)
    head(cars)
  })
  
  output$table <- renderTable({
    w_table$show() # 渲染表格前显示对应加载动画
    dataset()
  })

  output$hc <- renderHighchart({
    w_hc$show() # 渲染图表前显示对应加载动画
    hchart(dataset(), "scatter", hcaes(speed, dist))
  })
  
}

shinyApp(ui, server)

方案2：通过CSS保留隐藏Tab的元素尺寸 #

修改TabPanel的显示逻辑，让未激活的Tab内容依然占据DOM空间（仅隐藏可见性），确保Waiter能获取元素的位置信息。

在UI中添加自定义CSS即可，Server部分可保留原代码：

ui <- fluidPage(
  theme = shinytheme("cyborg"),
  useWaiter(),
  # 添加自定义CSS修正Tab显示逻辑
  tags$style(HTML("
    .tab-content > .tab-pane {
      display: block;
      visibility: hidden;
      height: 0;
      overflow: hidden;
    }
    .tab-content > .active {
      visibility: visible;
      height: auto;
      overflow: visible;
    }
  ")),
  actionButton("draw", "render stuff"),
  fluidPage(
    tabsetPanel(
      tabPanel("Table", tableOutput("table")),
      tabPanel("Chart", highchartOutput("hc"))
    )
  )
)

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