InsertUI is shown as recalculating with fade opacity

In the minimum application example below the inserted ui appears with fade oppacity (css class .recalculating)

library(shiny)

# Define UI
ui <- fluidPage(
  # this is where the UI will be inserted
  uiOutput("filters"),
  actionButton("add_filter", "Add")
)

# Define server logic required to insert UI
server <- function(input, output) {
  # when we click the button the UI is inserted
  observeEvent(input$add_filter,{
    insertUI(
      selector = "#filters",
      ui = div(
        selectInput("test", "test_label", choices = c(1,2))
      )
    )
  })
  
}

# Run the application 
shinyApp(ui = ui, server = server)

Why isn't is the normal display? How could it work? It probably means that something is recalculating and this isn't a good thing for the performance as well...

It seems to be occurring because you don't have an output$filters defined in the server, so there is nothing to insert the UI into. You can either create a NULL placeholder for output$filters, use a renderUI instead of insertUI or use selector = "#add_filter" and where = "beforeBegin" to add the UI before the action button.

library(shiny)

ui <- fluidPage(
    uiOutput("filters"),
  uiOutput("filters2"),
  actionButton("add_filter", "Add")
)


server <- function(input, output) {

  output$filters <- renderUI(NULL)
  
  observeEvent(input$add_filter,{
    insertUI(
      selector = "#filters",
      ui = div(
        selectInput("test", "test_label", choices = c(1,2))
      )
    )
  })

  output$filters2 <- renderUI({
    selectInput("test2", "test_label 2", choices = c(1,2))
  }) |> bindEvent(input$add_filter)

  observeEvent(input$add_filter,{
    insertUI(
      selector = "#add_filter",
      where = "beforeBegin",
      ui = div(
        selectInput("test3", "test_label 3", choices = c(1,2))
      )
    )
  })
  
}

shinyApp(ui = ui, server = server)