如何在bslib卡片中使用shinycssloaders withSpinner实现图表自适应？

问题根源在于shinycssloaders的withSpinner()默认生成的容器不兼容bslib的fill布局机制，导致原本能自适应容器的图表失去填充特性。以下两种方法可以解决：

方法1：调整withSpinner()的容器属性 #

给plotOutput开启fill特性，同时让加载动画的容器成为bslib的fill载体：

library(ggplot2)
library(shiny)
library(bslib)
library(shinycssloaders)
data(penguins, package = "palmerpenguins")

ui <- page_sidebar(
  title = "Penguins dashboard",
  sidebar = sidebar(
    title = "Histogram controls",
    varSelectInput(
      "var", "Select variable",
      dplyr::select_if(penguins, is.numeric)
    ),
    numericInput("bins", "Number of bins", 30)
  ),
  card(max_height = 200,
       full_screen = TRUE,
       card_header("Histogram"),
       # 开启plotOutput的fill，并让spinner容器支持fill布局
       plotOutput("p", fill = TRUE) |> 
         withSpinner(container = function(x) as_fill_carrier(x))
  )
)

server <- function(input, output) {
  output$p <- renderPlot({
    ggplot(penguins) +
      geom_histogram(aes(!!input$var), bins = input$bins) +
      theme_bw(base_size = 20)
  }, res = 96)
}

shinyApp(ui, server)

方法2：用bslib原生加载组件替代shinycssloaders #

bslib自带的spinner()函数天生兼容自身的fill布局，配置更简单：

library(ggplot2)
library(shiny)
library(bslib)
data(penguins, package = "palmerpenguins")

ui <- page_sidebar(
  title = "Penguins dashboard",
  sidebar = sidebar(
    title = "Histogram controls",
    varSelectInput(
      "var", "Select variable",
      dplyr::select_if(penguins, is.numeric)
    ),
    numericInput("bins", "Number of bins", 30)
  ),
  card(max_height = 200,
       full_screen = TRUE,
       card_header("Histogram"),
       # 使用bslib原生spinner，自动适配fill布局
       spinner(plotOutput("p", fill = TRUE))
  )
)

server <- function(input, output) {
  output$p <- renderPlot({
    ggplot(penguins) +
      geom_histogram(aes(!!input$var), bins = input$bins) +
      theme_bw(base_size = 20)
  }, res = 96)
}

shinyApp(ui, server)

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