如何在Shinylive（R）应用加载动画下方添加加载时长提示文本？

当然可以实现，你可以通过两种方式给Shinylive的加载动画下方添加预计加载时长的提示文本：

方法一：自定义加载模板 #

Shinylive允许你替换默认的加载HTML模板，直接在模板中添加文本元素并设置样式：

1. 创建一个名为custom_index.html的文件，内容如下：

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Shinylive App</title>
  {{ head_content }}
  <style>
    .shinylive-loader {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      height: 100vh;
      gap: 1.5rem;
    }
    .loader-prompt {
      font-size: 1.1rem;
      color: #555;
      font-family: sans-serif;
    }
  </style>
</head>
<body>
  <div id="shinylive-loader" class="shinylive-loader">
    <div class="shinylive-spinner"></div>
    <p class="loader-prompt">预计加载时间约30秒，请耐心等待</p>
  </div>
  {{ body_content }}
</body>
</html>

2. 导出Shinylive应用时指定这个自定义模板：

shinylive::export(
  app_dir = "path/to/your/shiny/app",
  index_html = "custom_index.html"
)

这种方式能完全控制加载界面的布局和样式，适合需要定制化加载体验的场景。

方法二：在Shiny应用中注入JS代码 #

如果不想修改整个模板，可以直接在Shiny UI中添加JavaScript代码，动态给加载区域插入文本：

ui <- fluidPage(
  # 注入自定义JS
  tags$script(HTML("
    document.addEventListener('DOMContentLoaded', function() {
      // 定位加载动画容器
      const loaderContainer = document.getElementById('shinylive-loader');
      if (loaderContainer) {
        // 创建提示文本元素
        const promptText = document.createElement('p');
        promptText.textContent = '预计加载时间约30秒，请稍候';
        promptText.style.cssText = 'margin-top: 1.2rem; font-size: 1.1rem; color: #555;';
        // 将文本添加到加载容器中
        loaderContainer.appendChild(promptText);
      }
    });
  ")),
  
  # 你的应用UI元素
  titlePanel("My Shinylive App"),
  sidebarLayout(
    sidebarPanel(
      # 侧边栏内容
    ),
    mainPanel(
      # 主面板内容
    )
  )
)

server <- function(input, output) {
  # 服务器逻辑
}

shinyApp(ui, server)

这种方式无需修改外部模板，直接在现有应用代码中添加，适合快速实现需求。

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