Package shinycssloaders causing dashboard to bounce

Question

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)

Answer 1

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

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