loadingButton

loadingButton is similar to shiny::actionButton() but, when clicked, it changes styles to resemble a loading state. Your Shiny app can then make some calculations or execute some database queries while the button is in this loading state. Once your app is done loading, call resetLoadingButton() to restore the loading button to an active state.

library(shiny)
library(shinyFeedback)

ui <- fluidPage(
  fluidRow(
    column(
      12,
      br(),
      loadingButton(
        "myLoadingButton", 
        label = "Submit"
      ),
      loadingButton(
        "myCancelButton", 
        label = "Cancel",
        class = "btn btn-danger",
        loadingLabel = "Cancelling...",
      )
    )
  )
)

server <- function(input, output, session) {
  
  
  # reset the loadingButton to its active state after 3 seconds
  observeEvent(input$myLoadingButton, {
    Sys.sleep(3)
    resetLoadingButton("myLoadingButton")
  })
  
  observeEvent(input$myCancelButton, {
    Sys.sleep(3)
    resetLoadingButton("myCancelButton")
  })
  
}


shinyApp(ui, server)

showToast

Show a toast notification. showToast() wraps the JavaScript toastr library. To use showToast() include useShinyFeedback() at the top of your ui. If you only want to use the toasts you can set the “feedback” argument to FALSE to only include css and js for the toasts.

library(shiny)
library(shinyFeedback)

ui <- fluidPage(
  useShinyFeedback(feedback = FALSE),
  fluidRow(
    column(
      12,
      br(),
      loadingButton(
        "myFirstButton", 
        label = "Submit"
      )
    )
  )
)

server <- function(input, output, session) {
  
  
  # reset the loadingButton to its active state after 2 seconds
  observeEvent(input$myFirstButton, {
    Sys.sleep(2)
    resetLoadingButton("myFirstButton")
    showToast(
      "success", 
      "I'll toast to that!"
    )
  })
  
}

shinyApp(ui, server)

shinyFeedback is not the first R package to wrap the toastr JavaScript library. The shinytoastr package did this years ago. The main difference between the shinyFeedback::showToast() implementation and shinytoastr’s is that we supply a “.options” argument rather than having an argument for each toastr option. This allows you to more easily set global toast options. e.g.

# use this list for all your toasts
myToastOptions <- list(
  positionClass = "toast-top-right",
  progressBar = FALSE,
  timeOut = 3000,
  closeButton = TRUE,

  # same as defaults
  newestOnTop = TRUE,
  preventDuplicates = FALSE,
  showDuration = 300,
  hideDuration = 1000,
  extendedTimeOut = 1000,
  showEasing = "linear",
  hideEasing = "linear",
  showMethod = "fadeIn",
  hideMethod = "fadeOut"
)


library(shiny)
library(shinyFeedback)

ui <- fluidPage(
  useShinyFeedback(feedback = FALSE),
  fluidRow(
    column(
      12,
      br(),
      loadingButton(
        "myLoadingButton", 
        label = "Submit"
      ),
      loadingButton(
        "myErrorButton", 
        label = "Error",
        class = "btn btn-danger",
        loadingLabel = "Erroring...",
      )
    )
  )
)

server <- function(input, output, session) {
  
  
  # reset the loadingButton to its active state after 2 seconds
  observeEvent(input$myLoadingButton, {
    Sys.sleep(2)
    resetLoadingButton("myLoadingButton")
    showToast(
      "success", 
      "I'll toast to that!", 
      .options = myToastOptions
    )
  })
  
  observeEvent(input$myErrorButton, {
    Sys.sleep(2)
    resetLoadingButton("myErrorButton")
    showToast(
      "error", 
      "Your toast is on fire!", 
      .options = myToastOptions
    )
  })
  
}




shinyApp(ui, server)

loadingButton and showToast

Andy Merlino

2021-09-23

loadingButton

showToast