Create loading messages that will change based on loading time of plot in a shiny app

Question

I have the shiny app below in which I use shinycustomLoader and shinycssLoader to create loading messages. I would like to know if there is a way to add more than one messages after spcific amount time. Foe example the first message will be "Analyzing" and after 15 seconds of loading it will be replaced by "Almost there". If there is another method or package that can do this I would be happy to know.

library(shiny)
library(shinycssloaders)
library(shinycustomloader)
ui <- fluidPage(
  actionButton("go", "Go"),
  shinycssloaders::withSpinner(
    plotOutput("plot")
  ),
  withLoader(plotOutput("plot2"),type = "text",loader = "Text")
)

server <- function(input, output) {
  output$plot <- renderPlot({
    input$go
    plot(runif(10000000))
  })
  output$plot2 <- renderPlot({
    input$go
    plot(runif(10000000))
  })
}
shinyApp(ui, server)

Answer 1

Here is a way to get such a result:

File myloader.html, to put in the app folder:

<div class="myloader">
  <h1>
    <span></span>
  </h1>
</div>

File myloader.css, to put in the www subfolder:

.myloader {
  text-align:center; 
  align-items: center;
}

.myloader > h1 {
  display: flex;
  justify-content: center;
  color: blue;
}

.myloader > h1 > span::before {
  content: "";
  animation-name: animate;
  animation-duration: 6s;
  animation-direction: normal;
  animation-fill-mode: forwards;
  padding-left: 10px;
}

@keyframes animate {
  0% {
    content: "Analyzing, please wait...";
  }
  100% {
    content: "Almost there!";
  }
}

And the Shiny app:

library(shiny)
library(shinycustomloader)

ui <- fluidPage(
  actionButton("go", "Go"),
  withLoader(
    plotOutput("plot"),
    type = "html",
    loader = "myloader"
  )
)

server <- function(input, output) {
  output$plot <- renderPlot({
    input$go
    x <- NULL
    for(. in 1:30000){
      x <- c(x, runif(1))
    }
    plot(x)
  })
}

shinyApp(ui, server)

---

EDIT

A stylish one:

@font-face {
  font-family: Origin;
  src: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/origin-extrabold-webfont.woff);
}

.myloader {
  align-items: center;
  background-color: #222;
  height: 400px;
}

.myloader > h1 {
  position: absolute;
  top: 50%;
  left: 30%;
  display: flex;
  justify-content: center;
  font-family: Origin, Helvetica Light, sans-serif;
  color: rgb(255, 242, 181);
  background-image: linear-gradient(
    rgb(255, 242, 181) 28%,
    rgb(77, 77, 77) 40%,
    rgb(255, 242, 181) 54%
  );
  -webkit-background-clip: text;
  letter-spacing: 0.5rem;
}

.myloader > h1 > span::before {
  content: "";
  animation-name: animate;
  animation-duration: 10s;
  animation-direction: normal;
  animation-fill-mode: forwards;
  padding-left: 10px;
}

@keyframes animate {
  0% {
    content: "Analyzing";
  }
  10% {
    content: "Analyzing.";
  }
  20% {
    content: "Analyzing..";
  }
  30% {
    content: "Analyzing...";
  }
  40% {
    content: "Analyzing....";
  }
  50% {
    content: "Analyzing.....";
  }
  60% {
    content: "Analyzing......";
  }
  70% {
    content: "Analyzing.......";
  }
  80% {
    content: "Analyzing........";
  }
  90% {
    content: "Analyzing.........";
  }
  100% {
    content: "Almost there!";
  }
}