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

Question

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

Answer 1

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.

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