When making an app with a large number of plots, it takes quite a while to load them. The issue is that all the plots on a page start rendering at the same time, even though a good number of them are not visible and require a lot of scrolling to access. I'm making plots with Plotly for this, but I believe it holds for other libraries such as eCharts, ggplot2 and so on.
I've read about the loading: lazy HTML tag for images, and something like that seems ideal here.
The question is, how can I stop plots that aren't currently on-screen from rendering?
Here's an example app:
library(plotly)
library(shiny)
ui <- fluidPage(
sliderInput("points_no", "Number of points", 5, 50, 10),
plotlyOutput("plot1"),
plotlyOutput("plot2"),
plotlyOutput("plot3"),
plotlyOutput("plot4"),
plotlyOutput("plot5"),
plotlyOutput("plot6")
)
server <- function(input, output, session) {
plot_object <- reactive({
plot_df <- data.frame(x = 1:input$points_no,
y = rnorm(input$points_no))
plot_ly(plot_df, x = ~x, y = ~y) |>
add_markers()
})
output$plot1 <- renderPlotly({
Sys.sleep(1)
plot_object()
})
output$plot2 <- renderPlotly({
Sys.sleep(1)
plot_object()
})
output$plot3 <- renderPlotly({
Sys.sleep(1)
plot_object()
})
output$plot4 <- renderPlotly({
Sys.sleep(1)
plot_object()
})
output$plot5 <- renderPlotly({
Sys.sleep(1)
plot_object()
})
output$plot6 <- renderPlotly({
Sys.sleep(1)
plot_object()
})
}
shinyApp(ui, server)
I've used Sys.sleep to imitate plots taking a while to render. The first plots don't show up until all 6 sleeps have finished. How can I make Shiny render only what's on screen?
Distributing content in tabs is good, but I need this page to include all of the plots at once, but preferably to load the first plots first because that's where the user starts.