显示 shinycssloaders 微调器，直到完整的 DT table（闪亮）准备就绪

Question

R shinycssloaders 包在最初显示微调器方面做得很好。但是，如果 table 非常大，那么它只会在最初显示，然后您会在用户等待 table 时看到 header 一段时间。在我的真实数据中，这个等待时间比这个例子要长，所以用户并不知道发生了什么。

我想让微调器继续显示，直到整个数据集（不仅仅是 header）都可以查看。

建议？

Zev

library(shiny)
library(DT)
library(shinycssloaders)
shinyApp(
  ui = fluidPage(fluidRow(column(12,withSpinner(DT::DTOutput('tbl'))))),
  server = function(input, output) {
    Sys.sleep(2)
    output$tbl = renderDT(
      data.frame(a = 1:10000000, b = 1:10000000)
    )
  }
)

Answer 1

shinycssloaders 在 Shiny 渲染事件完成后不工作。在这种情况下 datatable.js 是异步的。 table 骨架渲染完成后，它正在获取数据并等待数据加载，然后更新 table。闪亮渲染是在第一部分完成的，所以shinycssloaders无法覆盖第二部分。

为此，我们需要使用高级自定义加载器，在这种情况下，我的示例使用 spsComps 中的 addLoader，它从服务器端添加加载器，您可以决定何时添加添加它以及何时隐藏它。

我知道何时应用加载器的方式是基于数据table events。我添加了一些 js 来告诉 Shiny 服务器这些事件发生了，例如table 开始加载、页面更改触发器等。如果需要，您可以添加更多。然后，我从服务器显示加载器。当 table 数据加载时，我再次告诉 Shiny 服务器，然后我隐藏加载器。

library(shiny)
library(DT)
library(spsComps)
shinyApp(
    ui = fluidPage(
        fluidRow(column(12,DT::DTOutput('tbl'))),
        tags$script(
            "
            function loaderStart() {
                Shiny.setInputValue('loader_state', 1)
            }
            function loaderEnd() {
                Shiny.setInputValue('loader_state', 0)
            }
            $('#tbl').on('draw.dt', function () {
                loaderEnd();
            });
            $('#tbl').on('page.dt', function () {
                loaderStart();
            });
            $('#tbl').on('preInit.dt', function () {
                loaderStart();
            });
            $('#tbl').on('order.dt', function () {
                loaderStart();
            });
            "
        )
    ),
    server = function(input, output) {
        tbl_loader <- addLoader$new("tbl")
        output$tbl = renderDT(
            data.frame(a = 1:10000000, b = 1:10000000)
        )
        observeEvent(input$loader_state, {
            req(!is.null(input$loader_state))
            if(input$loader_state == 1) {
                tbl_loader$recreate(
                    type = "facebook",
                    footer = tags$span("Loading data ...", style = "display: block")
                )$show()
            } 
            else tbl_loader$hide()
        })
    }
)

阅读更多关于 addLoader, and try some demos

显示 shinycssloaders 微调器，直到完整的 DT table（闪亮）准备就绪

Show shinycssloaders spinner until full DT table (in shiny) is ready

r

shiny

dt

shinycssloaders