Show "loading graph" message in plotly

Question

I want to show message like "loading graph" while plotting is in progress.

How do I achieve this?

Expected output:

Answer 1

You can use shinycssloaders library for 8 different types of loaders. I had found this as more stable and easier to implement package.

library(shinycssloaders)
shinycssloaders::withSpinner(plotlyOutput("plot"), type=2)

Package : https://cran.r-project.org/web/packages/shinycssloaders/index.html

Demo App : https://daattali.com/shiny/shinycssloaders-demo/

Answer 2

Based on the above code, I have created a Shiny module that automatically shows / hides the loading animation based on whether the Shiny plot is drawn (for example, if the plot should only be shown after an action button is clicked, you need to make sure that the loading animation doesn't display until then).

The module is available on github at https://github.com/andrewsali/plotlyBars and after installing you can also run the example directly from there.

Loading this mini-library makes it very easy to create animated shiny plots, just replace plotlyOutput / renderPlotly with plotlyBarsUI and a call to the module plotlyBars. See the example app on the github site for more information on how to use the Shiny module.

Effectively what the code does is it shows the animation once the reactive creating the plot is started and hides it in case the reactive fails silently (e.g. a req or validate stops the processing).

Answer 3

I figured out a way to do it starting with https://codepen.io/doeg/pen/RWGoLR.

1. Copy contents of CSS into an external css file that you put in a subdirectory named www.
2. Reference that file in your Shiny script.
3. Insert the appropriate div statements in your script to wrap the code you want to load.
4. Modify your CSS such that the z-index of the animation is lower than the z-index of your plot so that when your plot appears, it is rendered on top of your animation.

For example, www/custom.css:

.plotly.html-widget.html-widget-output.shiny-bound-output.js-plotly-plot {
  z-index: 22;
  position: relative; 
}

.plotlybars {
  padding: 0 10px;
  vertical-align: bottom;
  width: 100%;
  height: 100%;
  overflow: hidden;
  position: relative;
  box-sizing: border-box;
}

.plotlybars-wrapper {
  width: 165px;
  height: 100px;
  margin: 0 auto;
  left: 0;
  right: 0;
  position: absolute;
  z-index: 1;
}

.plotlybars-text {
  color: #447adb;
  font-family: 'Open Sans', verdana, arial, sans-serif;
  font-size: 80%;
  text-align: center;
  margin-top: 5px;
}

.plotlybars-bar {
  background-color: #447adb;
  height: 100%;
  width: 13.3%;
  position: absolute;

  -webkit-transform: translateZ(0);
  transform: translateZ(0);

  animation-duration: 2s;
  animation-iteration-count: infinite;
  animation-direction: normal;
  animation-timing-function: linear;

  -webkit-animation-duration: 2s;
  -webkit-animation-iteration-count: infinite;
  -webkit-animation-direction: normal;
  -webkit-animation-timing-function: linear;
}

.b1 { left: 0%; top: 88%; animation-name: b1; -webkit-animation-name: b1; }
.b2 { left: 14.3%; top: 76%; animation-name: b2; -webkit-animation-name: b2; }
.b3 { left: 28.6%; top: 16%; animation-name: b3; -webkit-animation-name: b3; }
.b4 { left: 42.9%; top: 40%; animation-name: b4; -webkit-animation-name: b4; }
.b5 { left: 57.2%; top: 26%; animation-name: b5; -webkit-animation-name: b5; }
.b6 { left: 71.5%; top: 67%; animation-name: b6; -webkit-animation-name: b6; }
.b7 { left: 85.8%; top: 89%; animation-name: b7; -webkit-animation-name: b7; }

@keyframes b1 { 0% { top: 88%; } 44% { top: 0%; } 94% { top: 100%; } 100% { top: 88%; } }
@-webkit-keyframes b1 { 0% { top: 88%; } 44% { top: 0%; } 94% { top: 100%; } 100% { top: 88%; } }

@keyframes b2 { 0% { top: 76%; } 38% { top: 0%; } 88% { top: 100%; } 100% { top: 76%; } }
@-webkit-keyframes b2 { 0% { top: 76%; } 38% { top: 0%; } 88% { top: 100%; } 100% { top: 76%; } }

@keyframes b3 { 0% { top: 16%; } 8% { top: 0%; } 58% { top: 100%; } 100% { top: 16%; } }
@-webkit-keyframes b3 { 0% { top: 16%; } 8% { top: 0%; } 58% { top: 100%; } 100% { top: 16%; } }

@keyframes b4 { 0% { top: 40%; } 20% { top: 0%; } 70% { top: 100%; } 100% { top: 40%; } }
@-webkit-keyframes b4 { 0% { top: 40%; } 20% { top: 0%; } 70% { top: 100%; } 100% { top: 40%; } }

@keyframes b5 { 0% { top: 26%; } 13% { top: 0%; } 63% { top: 100%; } 100% { top: 26%; } }
@-webkit-keyframes b5 { 0% { top: 26%; } 13% { top: 0%; } 63% { top: 100%; } 100% { top: 26%; } }

@keyframes b6 { 0% { top: 67%; } 33.5% { top: 0%; } 83% { top: 100%; } 100% { top: 67%; } }
@-webkit-keyframes b6 { 0% { top: 67%; } 33.5% { top: 0%; } 83% { top: 100%; } 100% { top: 67%; } }

@keyframes b7 { 0% { top: 89%; } 44.5% { top: 0%; } 94.5% { top: 100%; } 100% { top: 89%; } }
@-webkit-keyframes b7 { 0% { top: 89%; } 44.5% { top: 0%; } 94.5% { top: 100%; } 100% { top: 89%; } }

and then in app.R:

library(shiny)
library(shinydashboard)
library(plotly)

ui <- dashboardPage(
title = "Loading animation test"
  , dashboardHeader(title = "Animated Test")
  , dashboardSidebar()
    ,dashboardBody(
      tags$head(
        tags$link(rel = "stylesheet", type = "text/css", href = "custom.css")
      )
    , h1("Plotly Bars (Animated CSS)")
    , div(id = "plot-container"
          , div(class = "plotlybars-wrapper"
            , div( class="plotlybars"
              , div(class="plotlybars-bar b1")
              , div(class="plotlybars-bar b2")
              , div(class="plotlybars-bar b3")
              , div(class="plotlybars-bar b4")
              , div(class="plotlybars-bar b5")
              , div(class="plotlybars-bar b6")
              , div(class="plotlybars-bar b7")
            )
            , div(class="plotlybars-text"
              , p("loading")
            )
          )
          , plotlyOutput("plot")
      )
    )
)

server <- function(input, output) {
  Sys.sleep(10) # just for demo so you can enjoy the animation
  output$plot <- renderPlotly({
    plot_ly(
      x = 2, y = 3, type = "scatter", mode = "markers"
    )
  })
}

shinyApp(ui = ui, server = server)