Loading Page for Shiny Dashboard

Question

I am trying to create a loading page for my dashboard but I can't seem to get it to work. I followed the example here; Shiny Dashboard - display a dedicated "loading.." page until initial loading of the data is done but it is for fluid page and not shiny dashboard and I can't figure out how to adapt it.

Any help would be appreciated!

I would preferably like the loading page just to be a fluid page (no header or sidebar) and then have my main dashboard have the shiny dashboard aspects.

Extra: If I could add a gif to the loading screen, that would be amazing. Something like:

<iframe src="https://giphy.com/embed/BlmF3MhGfa4SY" width="480" height="360" frameBorder="0" class="giphy-embed" allowFullScreen></iframe><p><a href="https://giphy.com/gifs/plane-BlmF3MhGfa4SY">via GIPHY</a></p>

[break]

library (shiny)
library (shinydashboard)
library(shinyjs)


rm(list=ls())

appCSS <- "
#loading_page {
  position: absolute;
  background: #000000;
  opacity: 0.9;
  z-index: 100;
  left: 0;
  right: 0;
  height: 100%;
  text-align: center;
  color: #FFFFFF;
}
"
header <- dashboardHeader()
sidebar <- dashboardSidebar()
body <- dashboardBody("It worked!")


ui <- dashboardPage(
  useShinyjs(),
  inlineCSS(appCSS),
  div(
    id = "loading_page",
    dashboardHeader(),
    dashboardSidebar(),
    dashboardBody("Loading...")
  ),
  hidden(
    div(
      id = "main_content",
      header, sidebar, body
    )
  )
)


server = function(input, output, session) {
    # Simulate work being done for 4 second
    Sys.sleep(4)

    hide("loading_page")
    show("main_content") 
  }

shinyApp(ui, server)

Did the below answer using `shinycssloaders` help you? – amrrs Nov 17 '17 at 04:14 — amrrs, Nov 17 '17 at 04:14

Pork Chop · Accepted Answer · 2021-04-06T12:58:55.250

8

Try this library shinycssloaders

library(shiny)
library(shinycssloaders)
library(highcharter)

ui <- fluidPage(
        mainPanel(
                plotOutput("my_plot")  %>% withSpinner(color="#0dc5c1")
        )
)

server <- function(input, output){
        
        output$my_plot <- renderPlot({
                Sys.sleep(1)
                plot(mtcars)})
}

shinyApp(ui, server)

edited Apr 06 '21 at 12:58

answered Nov 16 '17 at 21:34

Pork Chop

28,528
5
63
77

1

this is a nice eloquent solution that requires very little alteration to the code! I like it a lot that it is on the UI side as it takes into consideration the render time (unlike `withProgress` bar). The only downside is I have multiple tabs with multiple plots so it just requires a decent amount of copying and pasting! – Kevin Nov 17 '17 at 12:48

score 4 · Answer 2 · answered Apr 16 '19 at 06:14

4

Try this library: waiter Very easy to use with minimal and clean code. Comes with multiple loading animations.

Usage:

library(shiny)
library(waiter)

ui <- fluidPage(
  use_waiter(),
  actionButton("show", "Show loading for 5 seconds")
)

server <- function(input, output, session){
  observeEvent(input$show, {
    show_waiter(spin_fading_circles())
    Sys.sleep(4)
    hide_waiter()
  })
}

if(interactive()) shinyApp(ui, server)

Link: https://cran.r-project.org/web/packages/waiter/readme/README.html

answered Apr 16 '19 at 06:14

Ahmad M.

446
9
20

I like this! Are you able to add a custom animation to it? (say
via GIPHY
) also, what about a progress bar on the loading page as well? – Kevin Aug 16 '19 at 11:34
1

Where do you efficiently place this within a shiny dashboard? Because setting it in top of the `dashboardPage()` still displays at the very begining the dashboard itself. – yeahman269 Aug 21 '20 at 15:10

Loading Page for Shiny Dashboard

2 Answers2