显示 shinycssloaders 微调器，直到完整的 DT 表（闪亮）准备好

Question

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

我想让微调器继续显示，直到整个数据集（不仅仅是标题）准备好查看。

建议？

泽夫

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

在 Shiny 渲染事件完成后， shinycssloaders无法正常工作。 在这种情况下，datatable.js 是异步的。 表格骨架呈现后，它正在获取数据并等待数据加载然后更新表格。 Shiny 渲染在第一部分完成，因此shinycssloaders无法覆盖第二部分。

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

我知道何时应用加载器的方式是基于数据表事件。 我添加了一些 js 来告诉 Shiny 服务器发生了这些事件，例如表开始加载、页面更改触发器等。如果需要，您可以添加更多。 然后，从服务器，我展示了加载器。 当表数据加载完毕后，我再次告诉 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的更多信息，并尝试一些演示