{Waiter}

class: center, middle, inverse, title-slide

# {Waiter}
## Shiny user feedback with waiter
### John Coene
### 13-03-2020

---

.centerize[

# What is it?

Programmatically show and hide partial or full page loading screens in your shiny applications.

👇

]

---
class: inverse

.centerize[

# Why Bother?!

## <span style="color:white;">It's just aesthetics...</span>

]

---

.centerize[

# A lesson from an ad man

![](rory.png)

*Rory Sutherland*

]

---

# Perception of time

... on the London Tube

.pull-left[

Faster more frequent trains 😢

![](tube.jpg)

*Photo by Pau Casals on Unsplash*
]

.pull-right[

Dot-display matrices 😄

![](display-matrix.jpg)

*Photo by Mat Reding on Unsplash*
]

---
class: inverse

.centerize[

# Why?

.pull-left[

💨

## <span style="color:white">9 minutes of <span style="text-decoration:underline;color:#7fff7f;">certainty</span></span>

]

.pull-right[

🕒

## <span style="color:white">4 minutes of <span style="text-decoration:underline;color:#ff7f7f;">uncertainty</span></span>

]

---

.centerize[

## {waiter} can be the dot-display matrix of your app

Keep the user in the know, <span style="text-decoration:underline;">induce patience</span>.

]

---
class: inverse

.centerize[

# <span style="color:white">It's not "just aesthetics"</span>

# <span style="color:white">It serves a <span style="text-decoration:underline;">purpose</span></span>

]

---

.centerize[

# It's true of charts&mdash;and shiny applications

![](glamour_of_graphics.png)

*[Glamour of Graphics](https://resources.rstudio.com/rstudio-conf-2020/the-glamour-of-graphics-william-chase) by William Chase - RStudio Conf 2020*

]

---

# Deeper Implications

.pull-left[

## London Tube

🚋 Faster trains = <span style="color:#cc6565;">expensive</span>

📺 Dot display matrices = <span style="color:#65cc65	;">cheap</span>

]

.pull-left[

## Shiny apps

💻 Faster app = <span style="color:#cc6565;">difficult</span>

🕐 Loading screen = <span style="color:#65cc65	;">easy</span>

]

.centerize[

## Making your shiny app run fast<span style="text-decoration:underline;">er</span> is difficult<br/><br/>regardless of your level of proficiency with R.

]

---

.centerize[

# {waiter}

## doesn't actually make it run faster

## It makes it <span style="text-decoration:underline;">feel</span> faster

]

---

.centerize[

# False Dichotomy

It's not one or the other: do both!

.pull-left[
  1.5 seconds to load
![](app_no_waiter.gif)
]

.pull-right[
  3 seconds to load
![](app_with_waiter.gif)
]
]

---
class: inverse

.centerize[

# <span style="color:white">Waiter</span>

```r
install.packages("waiter") # CRAN
remotes::install_github("JohnCoene/waiter") # Dev
```

]

---

# Basics

.pull-left[

```r
library(shiny)
library(waiter)

ui <- fluidPage(
  # dependencies
* use_waiter(), 
  actionButton("render", "Render chart"),
  plotOutput("chart")
)

server <- function(input, output) {

# initialise
* w <- Waiter$new(id = "chart")

output$chart <- renderPlot({
    input$render

*   w$show()

Sys.sleep(2)

hist(runif(100))
  })
}

shinyApp(ui, server)
```

]

.pull-right[
![](waiter_chart.gif)
It hides when the element at `id` re-renders, works with any `render*` function.

Otherwise use the `hide` method.
]

---

.centerize[

# Demo

[shiny.john-coene.com/waiter](https://shiny.john-coene.com/waiter/)

]

---
class: inverse

.centerize[

## <span style="color:white">Useful Links</span>

<span style="color:white;">Docs:</span> [waiter.john-coene.com](https://waiter.john-coene.com/#/)

<span style="color:white;">Demo:</span> [shiny.john-coene.com/waiter](https://shiny.john-coene.com/waiter)

]
---
class: inverse

.centerize[

# <span style="color:white">THANK YOU</span>

[![Travis build
status](https://travis-ci.org/JohnCoene/waiter.svg?branch=master)](https://travis-ci.org/JohnCoene/waiter)
![R-CMD-check](https://github.com/JohnCoene/waiter/workflows/R-CMD-check/badge.svg)
[![CRAN
status](https://www.r-pkg.org/badges/version/waiter)](https://CRAN.R-project.org/package=waiter)

<br/>

<span style="color:white">💻 john-coene.com</span>

<span style="color:white">🐦 @jdatap</span>

]