如何让Shinycssloaders在fileInput选择文件后立即显示加载动画？

问题根源在于：fileInput的input$data仅在文件上传完成后才会更新，此时reactive表达式才开始执行，导致大文件上传过程中没有加载反馈。我们需要在用户选择文件的瞬间就触发加载动画，覆盖上传和数据读取的全流程。

步骤1：引入依赖包 #

需要添加shinyjs来监听前端文件选择事件，实时触发加载动画。

步骤2：修改UI代码 #

在UI中启用shinyjs，并给fileInput添加前端事件监听，当用户选择文件时立即通知服务器端显示加载动画。

步骤3：修改服务器端代码 #

• 监听前端发来的文件选择事件，立即显示页面级加载动画
• 在数据读取完成（或出错）时，确保关闭加载动画

完整修改后代码 #

library(shiny)
library(shinyjs)
library(shinycssloaders)
library(DT)
library(vroom)
library(dplyr)

ui <- fluidPage(
  shinyjs::useShinyjs(), # 启用shinyjs功能
  sidebarLayout(
    sidebarPanel(
      fileInput(
        "data", 
        label = "Select a file",
        # 前端事件：选择文件后立即向服务器发送信号
        onchange = 'Shiny.setInputValue("file_selected", Date.now());'
      )
    ),
    mainPanel(
      # 保留表格区域的加载动画（可选，用于表格渲染阶段）
      shinycssloaders::withSpinner(DT::DTOutput("table"), caption = "Rendering table...")
    )
  )
)

server <- function(input, output, session){
  options(shiny.maxRequestSize=300*1024^5)
  
  # 监听文件选择信号，立即显示页面级加载动画
  observeEvent(input$file_selected, {
    shinycssloaders::showPageSpinner(caption = "Uploading and loading data...")
  })
  
  # 响应式数据读取逻辑
  data <- reactive({
    # 确保文件已上传
    req(input$data, message = "Please, select a file to start")
    
    # 读取数据，无论成功失败都关闭加载动画
    tryCatch({
      vroom::vroom(input$data$datapath, delim = ",")
    }, finally = {
      shinycssloaders::hidePageSpinner()
    })
  })
  
  # 渲染DT表格
  output$table <- DT::renderDT(
    dplyr::sample_n(data(), 100),
    filter = "top",
    options = list(
      pageLength = 10,
      extensions = 'Responsive'
    )
  )
}

shinyApp(ui, server)

关键优化点 #

1. 实时触发动画：通过onchange事件监听文件选择操作，在用户点击文件后立即显示加载动画，无需等待上传完成。
2. 覆盖全流程：页面级showPageSpinner覆盖文件上传和数据读取的整个过程，解决大文件上传无反馈的问题。
3. 鲁棒性处理：用tryCatch的finally块确保无论数据读取成功还是失败，加载动画都会关闭，避免动画一直显示。
4. 保留表格动画：保留表格区域的withSpinner，用于表格渲染阶段的反馈（可选，可根据需求移除）。

内容的提问来源于stack exchange，提问作者CarlosFVásquez