Update UI multiple times in a row in R Shiny

Question

I'm trying to make a button blink (cycle through colors) a number of times before finally stopping. Sort of to simulate a lottery draw.

The final color in the end will be determined by a calculation, but first I need to figure out how to make it blink the initial n times before it stops.

This is what I tried to make, but it only updates the colors a part of the time, like 2 or 3 times.

library(shiny)
ui  <- fluidPage(

  uiOutput('ColorButton'),
  actionButton(inputId = 'Generator', label = 'Show colors', style = "background-color: #fff; color: #FF0000; border-color: #FF0000; 
               border-width: 2px; font-size: 20px; font-weight: bolder; 
               border-radius: 6px; height: 60px; display: block; margin-top: 100px; margin-left: auto; margin-right: auto"
  )

)

server <- function(input, output, session) { 
  values <- reactiveValues(go = 0)
  values$color <- '#FF0000'
  observe({ values$style = paste("background-color:", values$color, ";height:300px; width: 300px; border-radius: 150px;
                       display: block; margin-top: 100px; margin-left: auto; margin-right: auto") })

  colors <- c("darkgray", "blue", "red", "green", "orange", "darkblue", "yellow", "gray20", "purple",  "black", "cyan", "violet", "beige", "magenta", "pink", "brown")

  observeEvent(input$Generator, { values$go <- 1 }) 

  observeEvent(values$go, { 
    if(values$go > 0 & values$go < 20) { 

      sampled <- sample(c(1:12), 1)
      values$color <- colors[sampled]
      values$go <- values$go +1
      Sys.sleep(0.1)


   }
  })
  output$ColorButton  <- renderUI({ actionButton(inputId = 'ColorButton', label = NULL, style = values$style)})
}

shinyApp(ui = ui, server = server)

Answer 1

I slightly modified your example and included invalidateLater and isolate in an observer which changes the color and in another observer I handle the case when values$go is 0, so the ColorButton has an initial color.

library(shiny)

ui  <- {fluidPage(
  uiOutput('ColorButton'),
  actionButton(inputId = 'Generator', label = 'Show colors', style = "background-color: #fff; color: #FF0000; border-color: #FF0000; 
               border-width: 2px; font-size: 20px; font-weight: bolder; 
               border-radius: 6px; height: 60px; display: block; margin-top: 100px; margin-left: auto; margin-right: auto"
  )
)}

colors <- c("darkgray", "blue", "red", "green", "orange", "darkblue", "yellow", "gray20",
            "purple",  "black", "cyan", "violet", "beige", "magenta", "pink", "brown")

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

  values <- reactiveValues(go = 0)

  observe({
    if (values$go == 0) {
      values$color <- '#FF0000'
      values$go <- values$go +1
    }
  })

  observeEvent(input$Generator, {
    if (values$go == 20) {
      values$color <- '#FF0000'
      values$go <- 0
    }
  })

  observe({
    req(input$Generator)
    invalidateLater(500, session)
    isolate({
      if (values$go > 0 & values$go < 20) {
        sampled <- sample(c(1:12), 1)
        values$color <- colors[sampled]
        values$go <- values$go +1
      }      
    })
  }) 

  observe({ 
    values$style = paste("background-color:", values$color, ";height:300px; width: 300px; border-radius: 150px;
                         display: block; margin-top: 100px; margin-left: auto; margin-right: auto") 
  })

  output$ColorButton  <- renderUI({
    actionButton(inputId = 'ColorButton', label = NULL, style = values$style)
  })
}

shinyApp(ui = ui, server = server)