Author: Andy Merlino
Date: 2021-09-23

# loadingButton and showToast

#### Andy Merlino

#### 2021-09-23

# 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)