Delay in tabPanel content update when Sidebar control is updated

January 3, 2022

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.