Conditional Panel showing at first load in RStudio

[xiaoni]

I wonder why at first load in RStudio, the conditional panel is showing. I will be using many conditional Panel so this issue is more visible.
Expected Output and Actual Output at first load:This is the first load. But maybe after 3 seconds this will become the same as expected result.

Sample Code below:

library(shiny)
ui <- fluidPage(
  titlePanel("Mobile App Selection"),
  sidebarPanel(),
  conditionalPanel(condition="output.showAllResults == 1",
                   hr(),
                   h4('Results Quick Links')
                   h4('Test')
  ),
  conditionalPanel(condition="output.showResults == 1",
                   hr(),
                   h4('Results Quick Links')
                   h4('Test')
  ))

server <- function(input, output, session) {
  data <- reactiveValues(done = 0, done1 = 0)
  allResultsAvailable = 0
  ResultsAvailable = 0
  output$showAllResults <- reactive({
    if (data$done1 == 1 ) {
      allResultsAvailable = 1
    }
  })
  outputOptions(output, 'showAllResults', suspendWhenHidden = FALSE)
  output$showResults <- reactive({
    if (data$done1 == 1 ) {
      ResultsAvailable = 1
    }
  })
  outputOptions(output, 'showResults', suspendWhenHidden = FALSE)
}
shinyApp(ui, server)

[raytong]

Hi @xiaoni. The sample code provided didn't show what the problem that you have. Can you revise the sample code.

[xiaoni]

@raytong This is the sample code snippet I am working on. To replicate this in RStudio, try refreshing the page many times. You should be able to notice that some elements in conditional panel are showing but disappearing immediately. However, in my actual code (1000+ LOCs), this behavior is very noticeable.

library(shiny)

app_category <- c('Select a Category',
                  'A',
                  'B',
                  'C',
                  'D',
                  'E',
                  'F',
                  'G',
                  'H',
                  'I',
                  'J',
                  'K',
                  'L',
                  'M',
                  'N',
                  'O',
                  'P',
                  'Q',
                  'R',
                  'S',
                  'T',
                  'U',
                  'V',
                  'W',
                  'X')

apps_data <- mtcars
# apps_data <- apps_data[!duplicated(apps_data$title),]
appsTitle <- c(rownames(apps_data), "Select an App")

clean_app_list <- data.frame(mpg=NA, cyl=NA, disp=NA, hp=NA, drat=NA, wt=NA, qsec=NA)
clean_app_list <- clean_app_list[0,]
clean_classified_data <- data.frame(ID=NA, Reviews=NA, Category=NA, Intention=NA)
clean_classified_data <- clean_classified_data[0,]

ui <- fluidPage(
  shinyjs::useShinyjs(),
  titlePanel("Mobile App Selection"),
  sidebarPanel(
    selectInput("category_selection", "App Category",
                choices=app_category, selected="Select a Category"),
    hr(),
    selectInput("app_selection", "Select an App",
                choices=appsTitle, selected="Select an App"),
    fluidRow(
      column(6, align="right", offset=6,
             actionButton("add_app", label="Add"),
             actionButton("clear_app", label="Clear All")
      )
    ),
    conditionalPanel(condition="output.showAllResults == 1",
                     hr(),
                     h4('Results Quick Links'),
                     uiOutput("summary_apps")),
  ),
  mainPanel(
    actionButton("analyze_reviews", label="Analyze", style='margin-bottom:10px;'),
    conditionalPanel(condition="output.showPerformance == 1",
                     tabsetPanel(id = "performance_tab", 
                                 tabPanel(title="Performance Data", value="performance_data",
                                          fluidRow(
                                            column(12, style='margin-top:10px;'),
                                            column(12, style='margin-top:5px;'),
                                            column(12, style='margin-top:10px;'),
                                          )))),
    conditionalPanel(condition="output.showInput == 1",
                     tabsetPanel(id = "input_tab", 
                                 tabPanel(title="Software Choices", value="software_choices",
                                          fluidRow(
                                            column(12, style='margin-top:10px;', align="left",
                                                   verbatimTextOutput("update_apps_guide"),
                                                   column(6, style='margin-top:10px;', align="right", offset=6,
                                                          actionButton("update_apps", label="Update"),
                                                          actionButton("save_apps", label="Save"),
                                                          actionButton("cancel_update_app", label="Cancel"))),
                                            column(12, style='margin-top:10px;'),
                                            column(12, style='margin-top:10px;'),
                                            column(12, verbatimTextOutput("x2"))
                                          )))),
    conditionalPanel(condition="output.showAhpResults == 1",
                     tabsetPanel(id = "ahp_tab",
                                 tabPanel(title="Software Selection Results", value="software_selection_results",
                                          fluidRow(
                                            h5('Mobile App Selection Results'),
                                            column(12, verbatimTextOutput("app_ranking"), style='margin-top:10px;'),
                                            column(12)
                                          )),          
                                 tabPanel(title="AHP Input" , value = "ahp", id="ahp",
                                          fluidRow(
                                            column(6, align="right", offset=6, style='margin-top:20px; margin-bottom: 10px;', 
                                                   actionButton("show_decision_tree",
                                                                label="Show Decision Tree", 
                                                                style="background-color:#2196f3;
                            color:white;
                            font-weight:bold;
                            border-color:#2196f3;
                     "))
               )        
                                 ))), 
    conditionalPanel(condition="output.showResults == 1",
                     tabsetPanel(id = "results_tab",
                                 tabPanel(title="Software Metrics", value="software_metrics",
                                          fluidRow(
                                            column(6, style='margin-top:20px; margin-bottom: 20px;', 
                                                   actionButton("proceed",
                                                                label="Proceed to AHP", 
                                                                style="background-color:#2196f3;
                                              color:white;
                                              font-weight:bold;
                                              border-color:#2196f3;
                                       "),
                                                   actionButton("update_ahp_input",
                                                                label="Update", 
                                                                style="background-color:#2196f3;
                                              color:white;
                                              font-weight:bold;
                                              border-color:#2196f3;
                                       "),
                                                   actionButton("save_ahp_input",
                                                                label="Save", 
                                                                style="background-color:#2196f3;
                                              color:white;
                                              font-weight:bold;
                                              border-color:#2196f3;
                                       "),
                                                   actionButton("cancel_ahp_input",
                                                                label="Cancel", 
                                                                style="background-color:#2196f3;
                                              color:white;
                                              font-weight:bold;
                                              border-color:#2196f3;
                                       ")),
                                            column(12, verbatimTextOutput("disable_categories_guide"))
                                          )),
                                 tabPanel(title="Summary", value="summary_output",
                                          fluidRow(
                                            column(12),
                                            column(12),
                                          )),
                                 tabPanel(title="Raw Data", value="raw_data",
                                          fluidRow(
                                            column(12, style='margin-top:20px; ',selectInput("raw_data_app_options", "Select App", width="500px", 
                                                                                             apps_data$title)),
                                            column(12)
                                          )),
                                 tabPanel(title="Word Cloud", value="word_cloud",
                                          fluidRow(style="border: 1px solid black; padding: 10px; margin-bottom: 5px; margin-top:5px;",
                                                   column(12, style='margin-top:5px;', verbatimTextOutput("word_cloud_guide"))
                                                   
                                          ),
                                          fluidRow(
                                            column(12, plotOutput("word_cloud_plot")),
                                            column(12, verbatimTextOutput("word_cloud_no_data"),
                                                   tags$head(tags$style("#word_cloud_no_data{color: red;
                                 }"
                                                   )
                                                   ))
                                          ))
                     )
    )
  )
)

server <- function(input, output, session) {
  data <- reactiveValues(
    summary = character(),
    summary_category = character(),
    summary_intention = character(),
    alternatives = character(),
    pairwise_criteria_input = character(),
    ahp_done = 0,
    done = 0,
    input_done = 0,
    text_mining_done = 0,
    performance_done = 0,
    disable_categories = 0
  )
  resultsAvailable = 0
  ahpResultsAvailable = 0
  allResultsAvailable = 0 
  inputAvailable = 0
  performanceAvailable = 0
  shinyjs::disable("analyze_reviews")
  hideTab(inputId = "ahp_tab", target = "ahp")
  hideTab(inputId = "ahp_tab", target = "software_selection_results")
  updateTabsetPanel(session, "results_tab",
                    selected = "software_metrics"
  )
  output$showPerformance <- reactive({
    if (data$performance_done == 1 ) {
      performanceAvailable = 1
    }
  })
  outputOptions(output, 'showPerformance', suspendWhenHidden = FALSE)
  output$showInput <- reactive({
    if (data$input_done == 1 ) {
      inputAvailable = 1
    }
  })
  outputOptions(output, 'showInput', suspendWhenHidden = FALSE)
  output$showResults <- reactive({
    if (data$text_mining_done == 1) {
      resultsAvailable = 1
    }
  })
  outputOptions(output, 'showResults', suspendWhenHidden = FALSE)
  output$showAhpResults <- reactive({
    if (data$ahp_done == 1 ) {
      ahpResultsAvailable = 1
    }
  })
  outputOptions(output, 'showAhpResults', suspendWhenHidden = FALSE)
  output$showAllResults <- reactive({
    if (data$done == 1 ) {
      allResultsAvailable = 1
    }
  })
  outputOptions(output, 'showAllResults', suspendWhenHidden = FALSE)
}
shinyApp(ui, server)

[raytong]

@xiaoni. The flashing because the ui was loaded and displayed before the conditioanlPanel hide it. So, you can dynamically render all ui in conditionalPanel from server with renderUI will solve this problem.

[xiaoni]

@raytong This resolved my issue. Thank you so much. But I have encountered another problem. Specially in loading and hiding elements. I will post another question for these.

[andresrcs]

If your question's been answered (even by you!), would you mind choosing a solution? It helps other people see which questions still need help, or find solutions if they have similar problems. Here’s how to do it:

FAQ: How do I mark a solution?

If your question has been answered, don't forget to mark the solution! How do I mark a solution? Find the reply you want to mark as the solution and look for the row of small gray icons at the bottom of that reply. Click the one that looks like a box with a checkmark in it: [image] Hovering over the mark solution button shows the label, "Select if this reply solves the problem". If you don't see the mark solution button, try clicking the three dots button ( ••• ) to expand the full set of options. When a solution is chosen, the icon turns green and the hover label changes to: "Unselect if this reply no longer solves the problem". Success! [solution_reply_author] …