---
title: "CSS preloaders"
author: "David Granjon"
date: "`r Sys.Date()`"
output: rmarkdown::html_vignette
vignette: >
  %\VignetteIndexEntry{CSS preloaders}
  %\VignetteEngine{knitr::rmarkdown}
  %\VignetteEncoding{UTF-8}
---

```{r setup, include = FALSE}
knitr::opts_chunk$set(
  collapse = TRUE,
  comment = "#>"
)
```

## How to set up a preloader?

Pass the argument `preloader` to the `dashboardPage()` function. It expects a list containing all parameters necessary to `waiter::waiterShowOnLoad`. The duration is automatically handled by listening to the `shiny:idle` [event](https://shiny.rstudio.com/articles/js-events.html). Please have a look to the 
`{waiter}` [documentation](https://waiter.john-coene.com/) for more details.

That's all!

```{r waiter-code, eval=FALSE}
library(shiny)
library(bs4Dash)
library(waiter)
shinyApp(
  ui = dashboardPage(
    preloader = list(html = tagList(spin_1(), "Loading ..."), color = "#3c8dbc"),
    header = dashboardHeader(),
    sidebar = dashboardSidebar(),
    body = dashboardBody(
      actionButton("reload", "Reload")
    ),
    title = "Preloader"
  ),
  server = function(input, output, session) {
    # fake reload
    observeEvent(input$reload, {
      session$reload()
    })
  }
)
```

```{r, echo=FALSE}
bs4Dash:::app_container("https://dgranjon.shinyapps.io/bs4Dash-preloader/", TRUE)
```