2

I use the package shinycssloaders to place loading bars in my dashboards while plots calculate. However, they appear to be causing the dashboard to bounce occasionally when scrolled.

Obviously, this is undesirable. Does anyone know what could be causing this, and how I can fix it?

Reproducible example:

library(shiny)
library(tidyverse)
library(plotly)
library(shinycssloaders)


ui <- fluidPage(

    # Application title
    titlePanel("Example Bouncing Dashboard"),

    fluidRow(
      column(
        width = 12,
        withSpinner(plotlyOutput("plot1", height = 600))
      )
    ),
    
    fluidRow(
      column(
        width = 12,
        withSpinner(plotlyOutput("plot2", height = 600))
      )
    ),
    fluidRow(
      column(
        width = 12,
        withSpinner(plotlyOutput("plot3", height = 600))
      )
    ),
    fluidRow(
      column(
        width = 12,
        withSpinner(plotlyOutput("plot4", height = 600))
      )
    ),
    fluidRow(
      column(
        width = 12,
        withSpinner(plotlyOutput("plot5", height = 600))
      )
    ),
    fluidRow(
      column(
        width = 12,
        withSpinner(plotlyOutput("plot6", height = 600))
      )
    ),
    fluidRow(
      column(
        width = 12,
        withSpinner(plotlyOutput("plot7", height = 600))
      )
    ),
    fluidRow(
      column(
        width = 12,
        withSpinner(plotlyOutput("plot8", height = 600))
      )
    )
)


server <- function(input, output) {
  output$plot1 <- renderPlotly({
    graph <- mtcars %>% ggplot(
      aes(
        x = wt,
        y = drat,
        fill = cyl
      )) + geom_point()
      
    ggplotly(graph)
  })
  
  output$plot2 <- renderPlotly({
    graph <- mtcars %>% ggplot(
      aes(
        x = wt,
        y = drat,
        fill = cyl
      )) + geom_point()
    
    ggplotly(graph)
  })
  
  output$plot3 <- renderPlotly({
    graph <- mtcars %>% ggplot(
      aes(
        x = wt,
        y = drat,
        fill = cyl
      )) + geom_point()
    
    ggplotly(graph)
  })
  
  output$plot4 <- renderPlotly({
    graph <- mtcars %>% ggplot(
      aes(
        x = wt,
        y = drat,
        fill = cyl
      )) + geom_point()
    
    ggplotly(graph)
  })
  
  
  output$plot5 <- renderPlotly({
    graph <- mtcars %>% ggplot(
      aes(
        x = wt,
        y = drat,
        fill = cyl
      )) + geom_point()
    
    ggplotly(graph)
  })
  
  
  output$plot6 <- renderPlotly({
    graph <- mtcars %>% ggplot(
      aes(
        x = wt,
        y = drat,
        fill = cyl
      )) + geom_point()
    
    ggplotly(graph)
  })
  
  output$plot7 <- renderPlotly({
    graph <- mtcars %>% ggplot(
      aes(
        x = wt,
        y = drat,
        fill = cyl
      )) + geom_point()
    
    ggplotly(graph)
  })
  
  output$plot8 <- renderPlotly({
    graph <- mtcars %>% ggplot(
      aes(
        x = wt,
        y = drat,
        fill = cyl
      )) + geom_point()
    
    ggplotly(graph)
  })
}

# Run the application 
shinyApp(ui = ui, server = server)
anorlondo
  • 383
  • 1
  • 9
  • This issue was discussed [here](https://github.com/daattali/shinycssloaders/issues/54) and should be fixed in the github version. I'm on version 1.0.0 from CRAN and I have no issues with your example dashboard in Firefox and Edge. – TimTeaFan Jul 27 '22 at 05:18
  • I am also using version 1.0.0 from CRAN and the issue persists. Attempting to install the remote version 1.0.0.~99 from github results in any plotlyOutputs within withSpinner() causing the error 'Error: 'ui_element' must be a valid Shiny tag.' – anorlondo Jul 27 '22 at 05:41
  • @anorlonda: Have you seen [this comment](https://github.com/daattali/shinycssloaders/issues/54#issuecomment-769496236) in the github issue. He is suggesting to set `height` or `min-height` for the spinners in CSS and it helped him resolve the issue. – TimTeaFan Jul 27 '22 at 05:50

1 Answers1

1

Adding the following css style in app.R solves the issue.

tags$style(
    type = "text/css",
    "
      .loader {
        min-height: 40px !important;
      }
    "
  )
anorlondo
  • 383
  • 1
  • 9