Search code examples
rshinyshinydashboard

Delay in tabPanel content update when Sidebar control is updated


In the Shiny app below I am updating tabPanel content when the selection in sidebarMenu changes. However, there is a minor delay in the tabPanel content update when I change the selection in sidebarMenu.

For the small number of input values, this delay is negligible, but when I have a selectizeInput control in sidebarMenu and I load 1000 values there, then the content update in tabPanel is substantial. Is there a way to update tabPanel content instantly? Something like - content in all tabs is updated as soon as someone makes a selection in sidebarMenu, even before someone clicks at the tab?

library(shiny)
library(shinydashboard)

siderbar <- dashboardSidebar(
  sidebarMenu(
    # Add buttons to choose the way you want to select your data
    radioButtons("select_by", "Select by:",
                 c("Food Type" = "Food",
                   "Gym Type" = "Gym",
                   "TV show" = "TV"))
  )   
)

body <- dashboardBody(
  fluidRow(
    tabBox(
      side = "right",
      selected = "Tab3",
      tabPanel("Tab1", "Tab content 1", textOutput("tabset1Selected")),
      tabPanel("Tab2", "Tab content 2", textOutput("tabset2Selected")),
      tabPanel("Tab3", "Tab content 3", textOutput("tabset3Selected"))
    )
  ),
)

shinyApp(
  ui = dashboardPage(
    dashboardHeader(title = "tabBoxes"),
    siderbar,
    body
  ),
  server = function(input, output) {
    # The currently selected tab from the first box
    output$tabset1Selected <- output$tabset2Selected <- output$tabset3Selected <- renderText({
      input$select_by
    })
  }
)

Solution

  • Using the outputOptions to set suspendWhenHidden = FALSE updates the outputs also if they aren't visible:

    library(shiny)
    library(shinydashboard)
    
    siderbar <- dashboardSidebar(
      sidebarMenu(
        # Add buttons to choose the way you want to select your data
        selectizeInput(inputId = "select_by", label = "Select by:",
                       choices= as.character(1:1000))
      )   
    )
    
    body <- dashboardBody(
      fluidRow(
        tabBox(
          side = "right",
          selected = "Tab3",
          tabPanel("Tab1", "Tab content 1", textOutput("tabset1Selected")),
          tabPanel("Tab2", "Tab content 2", textOutput("tabset2Selected")),
          tabPanel("Tab3", "Tab content 3", textOutput("tabset3Selected"))
        )
      ),
    )
    
    shinyApp(
      ui = dashboardPage(
        dashboardHeader(title = "tabBoxes"),
        siderbar,
        body
      ),
      server = function(input, output) {
        # The currently selected tab from the first box
        output$tabset1Selected <- output$tabset2Selected <- output$tabset3Selected <- renderText({
          input$select_by
        })
        
        lapply(list("tabset1Selected", "tabset2Selected", "tabset3Selected"), outputOptions, x = output, suspendWhenHidden = FALSE)
      }
    )
    

    Furthermore you should consider using a server-side selectizeInput to enhance the performance for many choices.