Shiny - elements are not being rendered once function is complete

Question

I am dynamically creating the elements to be inserted into a fluidRow, the problem that I am facing is that all elements are being rendered at once. So, instead of rendering each element when its renderUI function ends, they all keep waiting until the last renderUI finishes. Thus, having lots of elements in my_dataset makes the rendering really slow.

I expected that once the print(str_glue('End: {i}')) was shown, the element would be rendered. However, this was not the case, it kept waiting for all elements (including ones that were not visible on screen).

I tried using the outputOptions(..., suspendWhenHidden = TRUE) but it made no difference (as it was expected since this is the default).

MWE

library(shiny)
library(shinydashboard)
library(dplyr)
library(tidyr)
library(purrr)
library(stringr)
library(shinycssloaders)

qtd <- 500

my_dataset <- data.frame(
  stringsAsFactors = F,
  Name = rep('Sample', qtd),
  Value = runif(qtd)
)

ui <- function() {
  fluidPage(
    fluidRow(
      column(12, textInput(inputId = 'my_text_input', label = NULL, placeholder = 'Search', width = '100%')),
      uiOutput('custom_ui')
    )
  )
}

server <- function(input, output, session) {
  output[['custom_ui']] <- renderUI({
    filtered_dataset <- my_dataset %>%
      filter(grepl(input[['my_text_input']], Name, ignore.case = T)) %>%
      arrange(Name)
    
    map(1:nrow(filtered_dataset), function(i) {
      item <- filtered_dataset[i,]
      custom_id <- str_glue('custom_id_{i}')
      output[[custom_id]] <- renderUI({
        print(str_glue('Start: {i}'))
        print(item)
        result <- box(
          width = 3,
          title = item$Name,
          item$Value
        )
        print(str_glue('End: {i}'))
        result
      })
      
      column(width = 3, uiOutput(custom_id, style = 'height: 350px;') %>% withSpinner(type = 6))
    })
  })
}


runApp(shinyApp(ui = ui, server = server), launch.browser = T)

Answer 1

What you are describing is the expected behaviour. The server will not return anything to the UI before all calculations are finished.

I see you are relying a lot on renderUI. This tends to make the Shiny app slow. When the app starts, it must load, realize that it lacks a portion of the UI, ask the server to create the UI - then the server will create the HTML for all of your boxes and send them to the UI before anything is shown. You should try to keep as much as possible of the UI static.

Dependent on what you want to achieve there are probably a lot of different ways of doing it without renderUI.

Under is an example where the HTML for the boxes are created outside of renderUI. This will work, as long as you don't need input controls or outputs in the boxes - because then they need their own ID.

---

library(shiny)
library(shinydashboard)
library(dplyr)
library(purrr)

qtd <- 500

my_dataset <- data.frame(
  stringsAsFactors = FALSE,
  Name = rep('Sample', qtd),
  Value = runif(qtd)
) %>%
  mutate(
    x = map2(
      Name,
      Value,
      ~column(
        width = 3,
        box(
          width = 3,
          title = .x,
          .y
        )
      )
    )
  )


ui <- function() {
  fluidPage(
    fluidRow(
      column(
        12,
        textInput(
          inputId = 'my_text_input',
          label = NULL,
          placeholder = 'Search',
          width = '100%'
        )
      ),
      uiOutput('custom_ui')
    )
  )
}

server <- function(input, output, session) {

  # Only the filtering of the data is done inside `renderUI`
  output[['custom_ui']] <- renderUI({

    filtered_dataset <-
      my_dataset %>%
      filter(grepl(input[['my_text_input']], Name, ignore.case = TRUE)) %>%
      arrange(Name) %>%
      pull(x)

  })

}


runApp(shinyApp(ui = ui, server = server), launch.browser = TRUE)

---

Last I just want to recommend this book by Hadley Wickham. I think reading this (or parts of this) book before working with Shiny will make everything easier for you.