daattali / daattali/shinycssloaders

No dynamic resizing of ggplots with `bslib` and `withSpinner()`

Open
#96 0 comments 1 reaction 0 assignees View on GitHub
Dominant language
CSS
Stars
422
Forks
45
PR merge metrics
No merged PRs in 30d

Description

When using `withSpinner()` together with `bslib` layout functions, plots created with `ggplot2` will no longer automatically fill the height of the browser.

For instance, consider this Shiny app ([link](https://shinylive.io/r/editor/#code=NobwRAdghgtgpmAXGKAHVA6ASmANGAYwHsIAXOMpMAGwEsAjAJykYE8AKAZwAtaJWAlAB0IdJiw71OY4aIbM27AOZLU1IqQBMskQGIABAEF9nWjDVx9KtRpE3SAfRX6APAFp9AMwCuEAqVoSdgDSajgBfRARfStVdVJ2GFICFk5cfSg4TnYAD30AXn0Ad1J01gL9cyUBCIBqaJirOCIYB1QiPgS6hpiVELDg2lDwkQBfERFvWlcPVCglOAdPWmpqKHoBhrXWIm9HYmpvGAhsnv0UxgATdnsAeT3UPfYhMHsARhf07jhaJW5SCovTQABmBqByLxquDOF2udweTxe9k0n3031+-0BYBBYIhYBqDQE0IgMVhN3i91IjwSSPiAGZUei-gDCkDQeDIbIdCc4IwAG68mZeXz+QIQdh8anpXZUvbpThZUwkCJREn6GXUgAk7yFjAol15AAV4uSNE4lM8wMaNPoPvjZDENXttfFNLr9UaTfZzZbrQCUfaGk7SC6NHT3RADYw-abHCpffF9AzAxBxhARDw+KxDOh2FN5byBYwBGBRgBdIA) to Shinylive.io):

```r
library(shiny)
library(bslib)
library(ggplot2)

# A simple ggplot
plot_gg <- function(title) {
ggplot(mtcars, aes(x = wt, y = mpg)) +
geom_point() +
ggtitle(title)
}

ui <- page_fillable(
layout_columns(
card(plotOutput("plot1", height = "200px")),
card(plotOutput("plot2", height = "200px"))
),
card(plotOutput("plot3", height = "200px"))
)

server <- function(input, output, session) {
output$plot1 <- renderPlot(plot_gg("Plot 1"))
output$plot2 <- renderPlot(plot_gg("Plot 2"))
output$plot3 <- renderPlot(plot_gg("Plot 3"))
}

shinyApp(ui, server)
```

When the browser window is resized, the height of the plots is automatically adjusted to fill the entire height. This is the desired result.

If I now introduce `withSpinner()`, the code becomes as follows ([link](https://shinylive.io/r/editor/#code=NobwRAdghgtgpmAXGKAHVA6ASmANGAYwHsIAXOMpMAGwEsAjAJykYE8AKAZwAtaJWAlAB0IdJiw71OY4aIbM27AOZLU1IqQBMssQo48+rAp2lEoAEziNOskQGIABAEEHnWjDVwHKtRpG-SAH0VBwAeAFoHADMAVwgCUloSdkTSajgBBxARB29VdVJ2GFICFk5cByg4TnYADwcAXgcAd1IK1kaHDyUBTIBqHNzvOCIYQNQiPkL+wdyVVPSU2jSMkQBfEREY2jDI1CglOECo2mpqKHpFwfPWIhig4moYmAga2YdSxnN2ZuXuAGVUHwIFZ2AEAPL3VD3dhCMABACMcIq3DgtCU3FInThmgADLjULU4b0BLh3p9vr9SACgRAQYwwQVIaRoYU4QFNMiHKj0ZjsWA8QSiWASYNSYMKT8-oDgaCIVCYeyCgBmLk8jFYpo4-GE4m9ES2V5WABuVl20TiCSSEHYfFZFTuLPuFU41TcJEy2QguUdrIAJIjzYwKJZGAAFAqMjTBJSwsARjQOJEi2Q+hWkAMFTRBkNWBOFAIxuP5hyclODX33TMaZU5iCh-NRoIqYsFByq8sQDYQEQGfhOdDsbYuk1WWRgNYAXSAA) to Shinyapp.io), and the plots height are now predetermined and static.

```r
library(shiny)
library(bslib)
library(ggplot2)
library(shinycssloaders)

# A simple ggplot
plot_gg <- function(title) {
ggplot(mtcars, aes(x = wt, y = mpg)) +
geom_point() +
ggtitle(title)
}

ui <- page_fillable(
layout_columns(
card(withSpinner(plotOutput("plot1", height = "200px"))),
card(withSpinner(plotOutput("plot2", height = "200px")))
),
card(withSpinner(plotOutput("plot3", height = "200px")))
)

server <- function(input, output, session) {
output$plot1 <- renderPlot(plot_gg("Plot 1"))
output$plot2 <- renderPlot(plot_gg("Plot 2"))
output$plot3 <- renderPlot(plot_gg("Plot 3"))
}

shinyApp(ui, server)
```

Is there any built-in way to fix this behavior?
I wonder if this is related to https://github.com/daattali/shinycssloaders/issues/76, but using `fill = TRUE` did not help.

Contributor guide

No contributing guide indexed for this repository

Research direction

Start by reproducing the two Shiny examples using bslib layout functions, ggplot2 plotOutput(), and shinycssloaders withSpinner(). Compare browser resizing with and without withSpinner(), then trace the generated output and CSS; done means spinner-wrapped plots still expand to the available height after window resizing.

Written by the indexing model from the issue text.

Assessment

Tech stack
css, r
Domain
frontend
Issue type
Bug
Difficulty
3/5
Estimated time
1-2 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
45/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.