rshinyshiny-reactivityshinyalert

How do I display a shinyalert pop-up while loading data?


I am working on a pretty "big" dataset that takes at least 20 seconds to be read entirely at the launch of my Shiny app. I would like to display a pop-up waiting message like the one below during this reading time, which will close automatically when it is done.

However, I have no idea how to specify a condition to automatically close the alert. Below is what I have done so far:

server <- function(input, output, session) {
   data = read_sav("BS.SAV")
 shinyalert(
      title = "Wait",
      text = "Waiting for data loading",
      size = "xs",
      closeOnEsc = TRUE,
      closeOnClickOutside = TRUE,
      html = TRUE,
      type = "info",
      showConfirmButton = TRUE,
      confirmButtonText = "OK",
      confirmButtonCol = "#004192",
      showCancelButton = FALSE,
      imageUrl = "",
      animation = TRUE
    )
}

Solution

  • Here is one example. Using the below code, we attach an onInput attribute on the fileInput which sets a certain InputValue when the upload starts.

    fileInput(
      inputId = 'file',
      label = 'Choose CSV File',
      accept = c('text/csv',
                 'text/comma-separated-values,text/plain',
                 '.csv')
    ) |>
      tagAppendAttributes(
        onInput = "
                  const id = $(this).find('input[type=\"file\"]').attr('id');
                  Shiny.setInputValue(id + '_click', Math.random());
                  "
      )
    

    The change of this InputValue triggers an observeEvent which displays the alert. The output gets then rendered into a DT::datatable and when this object is finally rendered, the alert gets closed (CloseAlert()), see the full example below.

    enter image description here

    library(shiny)
    library(shinyalert)
    
    options(shiny.maxRequestSize = 30 * 1024 ^ 2 * 4)
    
    shinyApp(
      ui = fluidPage(
        fileInput(
          inputId = 'file',
          label = 'Choose CSV File',
          accept = c('text/csv',
                     'text/comma-separated-values,text/plain',
                     '.csv')
        ) |>
          tagAppendAttributes(
            onInput = "
                      const id = $(this).find('input[type=\"file\"]').attr('id');
                      Shiny.setInputValue(id + '_click', Math.random());
            "
          ),
        DT::dataTableOutput("table")
      ),
      
      server = function(input, output, session) {
        input_file <- reactive({
          if (is.null(input$file)) {
            return("")
          }
          
          read.csv(file = input$file$datapath)
        })
        
        
        output$table <- DT::renderDataTable({
          req(input_file())
          
          closeAlert()
          
          input_file()
        })
        
        observeEvent(input$file_click,
                     {
                       shinyalert(
                         title = "Wait",
                         text = "Waiting for data loading",
                         size = "xs",
                         closeOnEsc = TRUE,
                         closeOnClickOutside = TRUE,
                         html = TRUE,
                         type = "info",
                         showConfirmButton = TRUE,
                         confirmButtonText = "OK",
                         confirmButtonCol = "#004192",
                         showCancelButton = FALSE,
                         imageUrl = "",
                         animation = TRUE
                       )
                       
                     },
                     ignoreNULL = FALSE,
                     ignoreInit = TRUE)
      }
    )