# CSS preloaders

#### David Granjon

#### 2023-06-15

## 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. Please have a look to the `{waiter}` documentation for more details.

That’s all!

    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()
        })
      }
    )