使用 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()

我尝试了几种方法来调整加载屏幕代码以适应我的示例。我似乎无法隐藏内容：

1. 在 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()
   

2. 将内容包装在 div() 中。

3. 根据这个答案使用 tagList() https://stackoverflow.com/a/32386689/5664232

Answer 1

您的第二个代码块没有运行。 between = p("") 之前少了一个逗号。

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

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()