showProgress {tabler}R Documentation

Show/Hide a Full-Page Progress Overlay

Description

Displays (or hides) a full-page loading overlay with an animated progress bar in a running tablerApp. Useful for indicating that a long-running computation (e.g. a database query) is in progress.

Usage

showProgress(session = getDefaultReactiveDomain(), text = "Loading...")

hideProgress(session = getDefaultReactiveDomain())

Arguments

session The session object passed by tablerApp to the server function. Defaults to getDefaultReactiveDomain().
text The message displayed above the progress bar.

Details

This is a dependency-free replacement for ad-hoc waiter/custom JS overlay setups. It works the same way as show/hide: the server sends a small message over the WebSocket connection and the browser-side JS (tabler-progress.js) creates/reveals or hides the overlay.

tablerApp's event loop only writes queued WebSocket messages to the socket in between iterations of its repeat { tinyhttpserver::service(); ... } loop. If showProgress() is immediately followed by a long, blocking computation in the same observer, the "show" message sits in the queue - never reaching the browser - until that observer (and thus the slow computation) finishes, making the overlay flash on right at the end instead of before the work starts. Calling tinyhttpserver::service() again from inside the observer to force an early flush is unsafe here: it re-enters httpuv's event loop while it is still dispatching the current WebSocket message, which can cause that message (and the input it carries) to be processed more than once. Use withProgress instead, which defers the slow computation with later2::later() so control returns to the event loop (flushing the "show" message) before the work actually runs.

Value

Invisibly, NULL.

See Also

tablerApp, withProgress

Examples

if (interactive()) {
  ui <- page(
    title = "Progress Example",
    body = body(actionButton("btn", "Load data"))
  )

  server <- function(input, output, session) {
    observeEvent(input$btn, {
      withProgress(session, "Loading data...", {
        Sys.sleep(2)
      })
    })
  }

  tablerApp(ui, server)
}

Loading...