withSpinner + bslib card_body_fill

[kalganem]

Hi Dean,

Thanks for developing this awesome package!

I'm using the bslib's card function with the full_screen set as True which expands the card to fit viewport size. Plotly outputs are responsive and auto fit the large viewport, however when withSpinner is wrapped around plotly outputs, it prevents the auto fit behavior.

Here's the reprex:

library(shiny)
library(shinycssloaders)
library(plotly)
library(bslib)

ui <- page_fluid(
  card(
    full_screen = T,
    card_header("without spinner"),
    card_body_fill(plotlyOutput("plot1"))
  ),
  card(
    full_screen = T,
    card_header("with spinner"),
    card_body_fill(withSpinner(plotlyOutput("plot2")))
  ),
)

server <- function(input, output) {
  
  output$plot1 <- renderPlotly({
    plot_ly(mtcars, x = ~mpg, y = ~cyl) |> add_markers()
  })
  
  output$plot2 <- renderPlotly({
    plot_ly(mtcars, x = ~mpg, y = ~cyl) |> add_markers()
  })
  
}

shinyApp(ui, server)

Is there a workaround around this issue?

For reference, here's the recent plolty update that made this work.

Thanks!

[daattali]

I can see the issue you describe. Thanks for reporting, and also for linking to plotly's change.

I'm afraid it's going to be very difficult for me to know how to accommodate this new functionality. Plotly's authors have the advantage of being the same author of {bslib} so they can make them work in tandem and know exactly what a change in one means for the other. We don't have this knowledge :)

By applying withSpinner(), the output gets wrapped in an additional <div>, so perhaps this card_body_fill is not happy with that. That's my only guess at the moment. I'd be happy to receive some help from anyone who has time looking into this and finding out the cause/solution. I don't know if I'll be ablet to address this any time soon, but hopefully someone can pick it up.

[daattali]

It looks like DT also had to make an update to allow a new parameter in order to support this https://github.com/rstudio/DT/releases/tag/v0.27 . I'm still of the opinion that it's not great practice for shiny to make changes that require their dependencies to accommodate... but I am starting to see that this specific feature is being adopted by a lot of RStudio's packages. So if you can't fight them, join them!

I'll review the PR next time I get around to this package

[SpikyClip]

I ended up writing a whole reprex only to find out someone else has beaten me to it. Here it is anyway:

library(shiny)
library(bslib)
library(plotly)
library(shinycssloaders)

mod_ui_with_spinner <- function(id) {
    ns <- NS(id)
    bslib::layout_column_wrap(
        style = "margin-top: 10px;margin-bottom: 10px",
        width = 1 / 2,
        min_height = "700px",
        bslib::card(
            full_screen = TRUE,
            bslib::card_header("mtcars"),
            bslib::card_body(
                plotly::plotlyOutput(ns("mtcars_plotly")) %>%
                    withSpinner()
            )
        ),
        bslib::card(
            full_screen = TRUE,
            bslib::card_header("iris"),
            bslib::card_body(
                plotly::plotlyOutput(ns("mtcars_iris")) %>%
                    withSpinner()
            )
        )
    )
}

mod_ui_with_spinner_proxy_height <- function(id) {
    ns <- NS(id)
    bslib::layout_column_wrap(
        style = "margin-top: 10px;margin-bottom: 10px",
        width = 1 / 2,
        min_height = "700px",
        bslib::card(
            full_screen = TRUE,
            bslib::card_header("mtcars"),
            bslib::card_body(
                plotly::plotlyOutput(ns("mtcars_plotly")) %>%
                    withSpinner(proxy.height = 700)
            )
        ),
        bslib::card(
            full_screen = TRUE,
            bslib::card_header("iris"),
            bslib::card_body(
                plotly::plotlyOutput(ns("mtcars_iris")) %>%
                    withSpinner(proxy.height = 700)
            )
        )
    )
}

mod_ui_no_spinner <- function(id) {
    ns <- NS(id)
    bslib::layout_column_wrap(
        style = "margin-top: 10px;margin-bottom: 10px",
        width = 1 / 2,
        min_height = "700px",
        bslib::card(
            full_screen = TRUE,
            bslib::card_header("mtcars"),
            bslib::card_body(
                plotly::plotlyOutput(ns("mtcars_plotly"))
            )
        ),
        bslib::card(
            full_screen = TRUE,
            bslib::card_header("iris"),
            bslib::card_body(
                plotly::plotlyOutput(ns("mtcars_iris"))
            )
        )
    )
}

mod_server <- function(id) {
    moduleServer(
        id,
        function(input, output, session) {
            mtcars_df <- reactive({
                data("mtcars")
                mtcars
            })
            iris_df <- reactive({
                data("iris")
                iris
            })

            output$mtcars_plotly <- renderPlotly({
                plotly::plot_ly(
                    mtcars_df(),
                    x = ~mpg,
                    y = ~cyl
                )
            })
            output$mtcars_iris <- renderPlotly({
                plotly::plot_ly(
                    iris_df(),
                    x = ~Species,
                    y = ~`Sepal.Length`
                )
            })
        }
    )
}

ui <- tagList(
    bslib::page_navbar(
        title = "test",
        bslib::nav_panel(
            title = "with_spinner",
            mod_ui_with_spinner("mod_with_spinner")
        ),
        bslib::nav_panel(
            title = "with_spinner_proxy_height",
            mod_ui_with_spinner_proxy_height("mod_with_spinner_proxy_height")
        ),
        bslib::nav_panel(
            title = "without_spinner",
            mod_ui_no_spinner("mod_no_spinner")
        )
    )
)

server <- function(input, output) {
    mod_server("mod_with_spinner")
    mod_server("mod_with_spinner_proxy_height")
    mod_server("mod_no_spinner")
}

shinyApp(ui, server)

It's a more complicated example because I was trying to see if it had anything to do with modules. Would love to know if there's a good workaround. Admittedly getting bslib to play nice with other UI elements is a bit of a pain.