Flexdashboard页面加载完成检测问题：加载提示无法自动隐藏

在包含多页面和复杂图表的flexdashboard（runtime: shiny）中，尝试通过Shiny的shiny:busy/shiny:idle事件控制页面加载提示的显示，但图表加载完成后提示无法隐藏。

核心问题分析 #

1. 多页面场景下重复使用相同ID（如id="loading"）会导致DOM选择冲突，JavaScript无法正确定位目标元素。
2. 未结合flexdashboard的页面切换机制（基于Bootstrap Tab组件），切换页面时无法同步加载提示状态。
3. 初始未设置加载提示的隐藏状态，且visibility属性仅隐藏元素但保留占位，体验不如display属性。

修改后的完整代码 #

RMD文件（含多页面示例）

---
title: 'Reprex'
output:
  flexdashboard::flex_dashboard:
    orientation: column
    vertical_layout: fill
runtime: shiny
---

```{r setup, include=FALSE}
library(flexdashboard)
tags$head(
  # 加载提示的样式：居中显示，默认隐藏
  tags$style(HTML("
    .loading {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      font-size: 1.2em;
      z-index: 999;
      display: none;
    }
  ")),
  tags$script(src = "script.js")
)

renderPlot({
  Sys.sleep(5) # 模拟长耗时计算
  plot(cars)
})

renderPlot({
  Sys.sleep(3) # 模拟长耗时计算
  plot(pressure)
})

#### JavaScript文件（script.js）
```javascript
// 监听Shiny进入忙碌状态：显示当前激活页面的加载提示
$(document).on('shiny:busy', function() {
  $('.tab-content .active .loading').css('display', 'block');
});

// 监听Shiny进入空闲状态：隐藏所有加载提示
$(document).on('shiny:idle', function() {
  $('.loading').css('display', 'none');
});

// 页面切换时同步状态：如果Shiny正忙，显示当前页面的加载提示
$(document).on('shown.bs.tab', 'a[data-toggle="tab"]', function() {
  if ($('html').hasClass('shiny-busy')) {
    $('.tab-content .active .loading').css('display', 'block');
  }
});

关键优化点 #

• 类名替代ID：用class="loading"代替全局唯一的ID，支持多页面重复使用加载提示元素。
• CSS样式优化：设置加载提示居中显示，默认隐藏，避免页面初始化时的突兀显示。
• 结合Tab切换事件：flexdashboard基于Bootstrap Tab，切换页面时触发shown.bs.tab事件，确保当前页面的加载提示状态与Shiny忙闲状态同步。
• 精准控制显示范围：仅对当前激活页面的加载提示进行显示/隐藏操作，避免干扰其他页面。

内容的提问来源于stack exchange，提问作者Xavier Bronlet