Ggplot resizing problem when switching tabPanels during calculations

shiny
,
1

Hi all,
i have a problem with the sizing of ggplots in shiny tabPanels. They are not automatically resizing when switching the tab.
I think the problem is similar to the one described here:

When I’m switching the active tab while the rendering and resizing process from the previous tab was not finished the same sizing issue appears when switching back to the first tab later.

Resizing_problem
Resizing_problem1066×539 25.4 KB

Is there a special trigger for switching tabs to build a script like this one for triggering sidebar-toggle?

tags$script(' $(".sidebar-toggle").on("click",function(){ $(window).trigger("resize"); })' )

I build a small App to demonstrate the problem. By clicking the first button, the plot gets updated with an 3 second suspend to simulate a longer calculation. In this time you have to switch to the second tab. After the 3 second you can go back to the first tab to see the problem:

library(ggplot2)
library(plotly)
library(shinydashboard)
library(shiny)
library(shinyjs)


header <- dashboardHeader(title = "Resizing Problem")


sidebar <-   dashboardSidebar(
                              sidebarMenu(

                                    actionButton("reload_plot","Generate plot"),
                                    actionButton("resize_plot","Rezise plot")
                                    )
                              )
                              

body <-   dashboardBody(
  
  useShinyjs(),
  
  tabBox(
    title = "TabBox" ,
    id = "tabset1",
    tabPanel("1. TabPanel with plot",  plotlyOutput(outputId = "test_plot")),
    tabPanel("2. TabPanel")
  )
)


ui <- dashboardPage(header,sidebar,body)


server <- function(input, output,session) {
  
  pp <- eventReactive(input$reload_plot,{
    Sys.sleep(3)
    data <- data.frame(x=1:1000,y=rnorm(1000,50))
    ggplot(data,aes(x,y)) + geom_point()
  })
  
  output$test_plot <- renderPlotly({ ggplotly(pp()) })

  onclick("#resize_plot", function() { HTML('$(window).trigger("resize");') } )
}


shinyApp(ui = ui, server = server)

I also tried to create a button for resizing the plots, but I think my knowledge to implement that is too low.

I tried the package “shinyjs” to create an action button:
actionButton("resizing","Resize all plot")
onclick("resizing", function() { HTML('$(window).trigger("resize");') } )

Is there a simple solution?
THX,
Boris