Shiny Dashboard - wyświetla dedykowaną stronę "loading .." do momentu pierwszego załadowania danych

Question

Mam wstępne ładowanie danych z DB w server.R, co trwa kilka sekund. Do tego czasu wyświetlana strona jest zniekształcona (niewłaściwe dane w polu wyboru i dziwne umieszczanie pól, patrz poniżej).

Chcę wyświetlić inną stronę (lub co najmniej inną treść na mojej pierwszej wyświetlanej karcie), dopóki dane nie zostaną całkowicie załadowane.

Pomyślałem o zrobieniu pewnego rodzaju conditionalPanel przy użyciu warunku opartego na dedykowanej zmiennej globalnej (initial_loading_done), ale gdziekolwiek próbowałem umieścić conditionalPanel, to nie działało.

Jest to struktura mojego UI.R:

shinyUI(

    dashboardPage(
    dashboardHeader(title = "Title"), 
    dashboardSidebar(
     sidebarMenu(
      menuItem("Tab1", tabName = "Tab1",icon = icon("dashboard")), 
      menuItem("Tab2", tabName = "Tab2", icon = icon("bar-chart-o")) 
     ) 
    ), 
    dashboardBody(
     includeCSS("custom_css.css"), 
     tabItems(
      tabItem(tabName = "Tab1", 
        fluidRow(<content>), 
        mainPanel(
         fluidRow(<content>) 
        ) 
      ), 
      tabItem(tabName = "Tab2", 
        fluidRow(<content>), 
        mainPanel(
         dataTableOutput('my_data_table') 
       ) 
      ) 
     ) 
    ) 
) 
) 

Answer 1

W server Lubię używać reactiveValues() przechowywać stan setupComplete. Następnie po załadowaniu danych mój setupComplete jest ustawiony na TRUE.

W ui możemy następnie ocenić tę setupComplete stan w conditionalPanel i tylko wyświetlać zawartość (w moim przykładzie trzech box() widgetów).

Oto przykład pracuje

## app.R ## 
library(shiny) 
library(shinydashboard) 
library(shinyjs) 

ui <- dashboardPage(
    dashboardHeader(), 
    dashboardSidebar(), 
    dashboardBody(
     actionButton(inputId = "btn_data", label = "Download"), 
     conditionalPanel(condition = "output.setupComplete", 
      box(title = "box1"), 
      box(title = "box2"), 
      box(title = "boc3") 
     ), 
     conditionalPanel(condition = "!output.setupComplete", 
         box(title = "loading")) 
    ) 
) 

server <- function(input, output) { 

    rv <- reactiveValues() 
    rv$setupComplete <- FALSE 

    ## simulate data load 
    observe({ 

     if(input$btn_data){ 

      df <- data.frame(id = seq(1,200), 
          val = rnorm(200, 0, 1)) 

      ## Simulate the data load 
      Sys.sleep(5) 
      ## set my condition to TRUE 
      rv$setupComplete <- TRUE 
     } 

     ## the conditional panel reads this output 
     output$setupComplete <- reactive({ 
      return(rv$setupComplete) 
     }) 
     outputOptions(output, 'setupComplete', suspendWhenHidden=FALSE) 

    }) 
} 

shinyApp(ui, server) 

Answer 2

Oto bardzo prosty przykład za pomocą shinyjs pakiet

Chodzi o to, aby stworzyć „stronę” Ładowanie i „stronę” treści pod różnymi identyfikatorami, mają zawartość strona początkowo ukryty i użyć show() i hide() po aplikacja jest gotowa

library(shiny) 
library(shinyjs) 

load_data <- function() { 
    Sys.sleep(2) 
    hide("loading_page") 
    show("main_content") 
} 

ui <- fluidPage(
    useShinyjs(), 
    div(
    id = "loading_page", 
    h1("Loading...") 
), 
    hidden(
    div(
     id = "main_content", 
     "Data loaded, content goes here" 
    ) 
) 
) 

server <- function(input, output, session) { 
    load_data() 
} 

shinyApp(ui = ui, server = server) 

Answer 3

Kod

hidden(
    div(
     id = "main_content", 
     "Data loaded, content goes here" 
    ) 

nie działa z tabsetPanel. Ale jeśli przeniesiesz identyfikator na poziom div, działa on pięknie. Podziękowania dla autora shinyjs Dean Attali za tę wskazówkę. https://stackoverflow.com/users/4432127/keshete

hidden(
     div(id = "mainTabsetPanel", 
      tabsetPanel(
....