rshinyshinycssloaders

Package shinycssloaders causing dashboard to bounce


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)


Solution

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

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