将 CSS 加载到闪亮的服务器时出现延迟

Question

首先，对 Shiny 还很陌生，所以请多多包涵。我试图在授权的情况下创建 R studio 闪亮页面。第一页是登录页面，如果您通过授权过程（例如，用户和密码正确），您将被带到闪亮的主页面。实际上，它只是意味着渲染了两个不同的 UI。

然而，自从实施授权页面后，CSS 更改侧边栏和 header 颜色的代码似乎运行有延迟（如运行ning 所示app，你可以注意到闪亮的默认样式被加载到侧边栏上，后来它被 CSS 覆盖）。这可能是什么问题？

代码如下：

ui.R

shinyUI(
fluidPage(

ui <- dashboardPage(

header <- dashboardHeader(uiOutput("header")),
sidebar <- dashboardSidebar(uiOutput("sidebarpanel")),
body <- dashboardBody(uiOutput("body"))
)))

server.R

library(shinydashboard)
library(writexl)
library(shinyjs)
library(shinythemes)
library(openssl)
library(shinyWidgets)

shinyServer(function(input, output, session) {

Logged <- FALSE
USER <<- reactiveValues(Logged = Logged)

my_username <- "demo"
my_password <- "369"

observe({ 
 if (USER$Logged == FALSE) {
  if (!is.null(input$Login)) {
    if (input$Login > 0) {
      Username <- isolate(input$userName)
      Password <- isolate(input$passwd)
      Id.username <- which(my_username == Username)
      Id.password <- which(my_password == Password)
      if (length(Id.username) > 0 & length(Id.password) > 0) {
        if (Id.username == Id.password) {
          USER$Logged <<- TRUE
        }}
       else sendSweetAlert(session = session, title = "Incorrect Username or 
       Password!",
                        text = "Please check.", type = "error",
                         btn_labels = "Ok")

         }}}    
     })

    output$body <- renderUI({ 
    dashboardBody(
          tags$style(HTML('
                  /* logo */
                  .skin-blue .main-header .logo {
                  background-color: #FFFFFF;
                  }

                  /* logo when hovered */
                  .skin-blue .main-header .logo:hover {
                  background-color: #FFFFFF;
                  }

                  /* sidebar */
                  .skin-blue .main-sidebar {
                  background-color: #873260;
                  }

                  /* logo when hovered */
                  .skin-blue .main-header .navbar {
                  background-color: #873260;
                  }
                  ')),

   if (USER$Logged == FALSE) {
        box(title = "Login",textInput("userName", "Username"),
        passwordInput("passwd", "Password"),
        br(),
        actionButton("Login", "Log in")
    )})
})

    output$sidebarpanel <- renderUI({
      if (USER$Logged == TRUE) { 
        dashboardSidebar( 

                    sidebarMenu(
                      menuItem("Home", icon = icon("home")),
                      menuItem("Panel 1", icon = icon("th-large")),
                      menuItem("Panel 2", icon = icon("dashboard")),
                      menuItem("Panel 3", icon = icon("dashboard")),
                      menuItem("Panel 4", icon = icon("pencil")),
                      menuItem("Panel 5", icon = icon("pencil")),
                      menuItem("Panel 6", icon = icon("th"))
                    )
                  )
  }})
})

Answer 1

将样式放入 ui.R 似乎可以解决问题

shinyUI(
fluidPage(

ui <- dashboardPage(

  header <- dashboardHeader(uiOutput("header")),
  sidebar <- dashboardSidebar(uiOutput("sidebarpanel")),
  body <- dashboardBody(      tags$style(HTML('
                                              /* logo */
                                              .skin-blue .main-header .logo {
                                              background-color: #FFFFFF;
                                              }

                                              /* logo when hovered */
                                              .skin-blue .main-header 
                                              .logo:hover {
                                              background-color: #FFFFFF;
                                              }

                                              /* sidebar */
                                              .skin-blue .main-sidebar {
                                              background-color: #873260;
                                              }

                                              /* logo when hovered */
                                              .skin-blue .main-header .navbar {
                                              background-color: #873260;
                                              }
                                              ')),

    uiOutput("body"))
)))

不过，如果有人能解释造成延迟的原因，那就太好了。

将 CSS 加载到闪亮的服务器时出现延迟

Delay when loading CSS into shiny server

r

loading

shiny