使用 miniUI 在闪亮的小工具上加载屏幕

Question

我正在使用 miniUI 构建一个闪亮的小工具。我想在小工具做一些准备工作时显示一个加载屏幕，并尝试实施这个简单方便的解决方案：https://github.com/daattali/advanced-shiny/blob/master/loading-screen/app.R

下面是小工具的外观小示例：

library(shiny)
library(shinyjs)
library(miniUI)

sampleApp <- function() {
  ui <- miniPage(
    gadgetTitleBar("Sample App"),
    miniTabstripPanel(
      miniTabPanel(
        "Panel 1",
        fillCol(div("Content of Panel 1"))
      ),
      miniTabPanel(
        "Panel 2",
        fillCol(div("Content of Panel 2"))
      ),
      between = p("") # Needed later on to avoid error in shinyjs::hidden()
    )
  )

  server <- function(input, output) {
  }

  runGadget(ui, server, viewer = dialogViewer("Sample dialog"))
}
sampleApp()

我已经尝试了多种方法来使加载屏幕代码适应我的示例。我似乎无法获取要隐藏的内容：

在 miniTabstripPanel() 周围放置 hidden():

library(shiny)
library(shinyjs)
library(miniUI)

appCSS <- "
#loading-content {
 position: absolute;
 background: #000000;
 opacity: 0.9;
 z-index: 100;
 left: 0;
 right: 0;
 height: 100%;
 text-align: center;
color: #FFFFFF;
}
"

sampleApp <- function() {
ui <- miniPage(
  useShinyjs(),
  inlineCSS(appCSS),

  # Loading message
  div(
    id = "loading-content",
    h2("Loading...")
  ),

  # The main app code goes here
  gadgetTitleBar("AppTitle"),
  hidden(
    miniTabstripPanel(
      miniTabPanel(
        "Panel 1",
        fillCol(div("Content of Panel 1"))
      ),
      miniTabPanel(
        "Panel 2",
        fillCol(div("Content of Panel 2"))
      ),
      between = p("") # Needed later on to avoid error in shinyjs::hidden()
    ),
    id = "app-content"
  )
)
server <- function(input, output) {
  # Simulate work being done for 1 second
  Sys.sleep(1)

  # Hide the loading message when the rest of the server function has executed
  hide(id = "loading-content", anim = TRUE, animType = "fade")
  show("app-content")
}
 runGadget(ui, server, viewer = dialogViewer("Sample dialog"))
}
sampleApp()

将内容包装在 div() 中。
根据这个答案使用tagList()

Answer 1

您的第二个代码块没有运行。 between = p("").

前少了一个逗号

此代码确实可以显示加载屏幕并将其淡出，唯一没有做的就是最初隐藏内容。看起来 miniUI tabsetpanel 真的不喜欢在任何其他 div 或元素中，所以我就这样吧。 miniUI 确实有很多错误，而且比普通的 shiny UI 更难处理，不幸的是，这只是我们在构建小工具时必须处理的一个怪癖。部分原因是 miniUI 使用不同的 CSS 系统（flex boxes），但无论如何，这段代码在不隐藏内容的情况下工作：

library(shiny)
library(shinyjs)
library(miniUI)

appCSS <- "
#loading-content {
position: absolute;
background: #000000;
opacity: 0.9;
z-index: 100;
left: 0;
right: 0;
height: 100%;
text-align: center;
color: #FFFFFF;
}
"

sampleApp <- function() {
  ui <- miniPage(
    useShinyjs(),
    inlineCSS(appCSS),

    # Loading message
    div(
      id = "loading-content",
      h2("Loading...")
    ),

    # The main app code goes here
    gadgetTitleBar("AppTitle"),
    miniTabstripPanel(
      miniTabPanel(
        "Panel 1",
        fillCol(div("Content of Panel 1"))
      ),
      miniTabPanel(
        "Panel 2",
        fillCol(div("Content of Panel 2"))
      ),
      between = p("") # Needed later on to avoid error in shinyjs::hidden()
    )
  )
  server <- function(input, output) {
    # Simulate work being done for 1 second
    Sys.sleep(1)

    # Hide the loading message when the rest of the server function has executed
    hide(id = "loading-content", anim = TRUE, animType = "fade")
  }
  runGadget(ui, server, viewer = dialogViewer("Sample dialog"))
}
sampleApp()

如果你真的想从 UI 中隐藏内容然后显示它，我相信可以通过一些解决方法来完成，但调试它可能需要一些时间，但我不这样做现在有时间，所以我将向您展示一个类似的不太理想的解决方法：一旦服务器处于活动状态，就隐藏选项卡和面板内容，并在最后显示它们。它不是那么好，因为它们没有初始化为隐藏，但这是我能在 2 分钟内完成的最好的。

library(shiny)
library(shinyjs)
library(miniUI)

appCSS <- "
#loading-content {
position: absolute;
background: #000000;
opacity: 0.9;
z-index: 100;
left: 0;
right: 0;
height: 100%;
text-align: center;
color: #FFFFFF;
}
"

sampleApp <- function() {
  ui <- miniPage(
    useShinyjs(),
    inlineCSS(appCSS),

    # Loading message
    div(
      id = "loading-content",
      h2("Loading...")
    ),

    # The main app code goes here
    gadgetTitleBar("AppTitle"),
    miniTabstripPanel(
      miniTabPanel(
        "Panel 1",
        fillCol(div("Content of Panel 1"))
      ),
      miniTabPanel(
        "Panel 2",
        fillCol(div("Content of Panel 2"))
      ),
      between = p("") # Needed later on to avoid error in shinyjs::hidden()
    )
  )
  server <- function(input, output) {
    hide(selector = ".gadget-tabs-content-container, .gadget-tabs-container")

    # Simulate work being done for 1 second
    Sys.sleep(1)

    # Hide the loading message when the rest of the server function has executed
    hide(id = "loading-content", anim = TRUE, animType = "fade")
    show(selector = ".gadget-tabs-content-container, .gadget-tabs-container")
  }
  runGadget(ui, server, viewer = dialogViewer("Sample dialog"))
}
sampleApp()

使用 miniUI 在闪亮的小工具上加载屏幕

Loading Screen on a Shiny gadget with miniUI

shiny

shinyjs