Blinking Loading Text in R Shiny

how to avoid flickering while refreshing valueboxes in Shiny dashboard

If you only want to stop the flashing while recalculating all you'll have to do is adding

tags$style(".recalculating { opacity: inherit !important; }")

to your UI - taken from here.

Still I'd encourage you to simplify your app for better performance.

Here is an example for the approach I mentioned in the comments:

library(shiny)
library(shinydashboard)
library(data.table)

ui <- dashboardPage(
  dashboardHeader(),
  dashboardSidebar(),
  dashboardBody(
    tags$style(".recalculating { opacity: inherit !important; }"),
    fluidPage(
      sliderInput(
        inputId = "nBoxesRows",
        label = "rows of Boxes",
        min = 1L,
        max = 100L,
        value = 20L
      ),
      uiOutput("myValueBoxes")
      )
  )
)

server <- function(input, output, session) {
  DT <- reactive({
    invalidateLater(1000)
    data.table(replicate(4, round(runif(input$nBoxesRows), digits = 2)))
  })
  
  output$myValueBoxes <- renderUI({
    longDT <- melt(DT(), measure.vars = names(DT()))
    longDT[, subtitle := paste0(variable, "_", seq_len(.N)), by = variable]
    tagList(mapply(valueBox, subtitle = longDT$subtitle, value = longDT$value, MoreArgs = list(width = 3), SIMPLIFY = FALSE))
  })
}

shinyApp(ui, server)

How to update values in Shiny without flickering?

The flickering/refresh can't be avoided with some html induced plots, such as through leaflet.

You can adjust the opacity to 1, of your shiny app to give off the illusion that it doesn't flicker, but it will only work for some non-html objects. See this link and the answer by Joe Cheng. I was never able to solve this issue a year and a half ago.

The flickering can be removed with animations of grob objects for example. Try Joe's solution with some animation with a ggplot line graph.

Blinking ggplot in shiny R app

Please have alook at this: I had the same problem and it was solved here:

In R Shiny, how to eliminate the flashing of observeEvent conditionals when first invoking the App?

It takes some time in the event loop until observerEvent is called the first time.
By default, it will be displayed at the very beginning.
This results into a flash.
Just hide input2 at the very beginning of the server function:

server <- function(input, output, session) {
  # Avoid flashing
  shinyjs::hide(id = "input2")
  
  output[["checkboxes"]] <-
    renderTable(
      {
        tbl
      },
      rownames = TRUE,
      align = "c",
      sanitize.text.function = function(x) x
    )

  observeEvent(input[["show1"]], {
    if (input[["show1"]] %% 2 == 1) {
      shinyjs::show(id = "input2")
    } else {
      shinyjs::hide(id = "input2")
    }
  })
}

Prevent flickering of shiny updateSelectizeInput with server = T

I'm not sure you can get something fully satisfying without going into selectize.js. It might be a little bit hacky, but if all you focus on is the UX, it can do the job:

choicesONE <- as.character(sample(1:1000000, size = 1000))
choicesTWO <- sample(choicesONE, size = 20)

...

observe({

    if (input$sub) {
        input_choices <- choicesTWO
    } else {
        input_choices <- choicesONE
    }

    input_placeholder <- isolate(input$topic)
    if (!(is.null(input_placeholder) || input_placeholder %in% choicesTWO)) {
        input_placeholder <- "Please choose..."
    }

    isolate(
        updateSelectizeInput(
            session,
            server = T,
            'topic',
            choices = input_choices,
            selected = choice$selection,
            options = list(placeholder=input_placeholder))
    )

})

To make it even more seemless, you could use a little bit of CSS.

Conditional panel message flashes and then disappears when initializing app

Updated revised answer

Before addressing to the actual problem of the flashing red message:

Formerly, I thought the problem is related to the fact that output (output$square) is defined as reactive. I thought that this would not work and that it would be causing the error. However, although this is definitely not how shiny is intended to be used (reactives represent 'reactive conductors' whereas outputs represent 'reactive endpoints'), your approach seems to be working.

A more shiny-like way of rebuilding your approach could make use of renderUI. Below, I intentionally included an (intermediate) reactive.

library(shiny)

ui <- fluidPage(
  numericInput("num", "Choose a number",1.1,1,10),
  uiOutput("text")
)

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

  square_out <- reactive({
    sqrt(as.numeric(input$num)) %% 1 == 0
  })

  output$text <- renderUI({

    if (square_out()) {
      div("That's a perfect square!",style="color:red; height:400px")
    }

  })

}

shinyApp(ui = ui, server = server)

This reactive leads to the very same flashing message in the beginning. The reason is that when starting the app, the reactive is not yet evaluated, that is in R it is NULL. In javascript this translates to:

toJSON(NULL)
> {} 

This is an empty condition which is equivalent to true. So the message is displayed. Then, the reactive is evaluated and the condition kicks in, hiding the message.

So a better way would be to use Gregs approach and put the condition in the renderUI statement (see his answer). Here the UI element is only displayed when evaluated, and while evaluating the condition is checked. Here it is not possible that the UI element is shown while the part generating the condition is not executed/evaluated yet.

So my second approach also is no help in getting rid of the flashing message. Here the idea was to generate a textOutput and use it as condition of the conditional panel, however, the same problem arises as with the reactive: in the beginning it is not yet evaluated and the red message appears.

library(shiny)

ui <- fluidPage(

  numericInput("num", "Choose a number",1.1,1,10),

  conditionalPanel(
    condition = "output.text == 'TRUE'",
    div("That's a perfect square!",style="color:red; height:400px")
  ),
  textOutput("text")
)

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

  output$text <- renderText({
    print(sqrt(as.numeric(input$num)) %% 1 == 0)
    sqrt(as.numeric(input$num)) %% 1 == 0

  })

}

shinyApp(ui = ui, server = server)

I hope this sheds some light on the issue.

How to make blinking/flashing text with CSS 3

You are first setting opacity: 1; and then you are ending it on 0, so it starts from 0% and ends on 100%, so instead just set opacity to 0 at 50% and the rest will take care of itself.

Demo

.blink_me {  animation: blinker 1s linear infinite;}
@keyframes blinker {  50% {    opacity: 0;  }}

<div class="blink_me">BLINK ME</div>

---

Related Topics