0

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

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

建议？

泽夫

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)
    )
  }
)
4

1 回答 1

1

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

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

我知道何时应用加载器的方式是基于数据表事件。我添加了一些 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，并尝试一些演示

于 2022-01-07T00:36:52.917 回答