Add busy indication (#4040)

* First pass at a proper state machine for managing output progress state

* `yarn build` (GitHub Actions)

* Add useBusyIndicators(), spinnerOptions(), and pulseOptions()

* Bring in new spinner defaults

* Use an actual div instead of a pseudo-element since chromium can't be trusted to show them when animated

* Revert "Use an actual div instead of a pseudo-element since chromium can't be trusted to show them when animated"

This reverts commit 6167c1dfd7.

* Embed animation inside svg (to avoid Chromium bug). Consolidate options into a singular busyIndicatorOptions()

* Add to pkgdown reference

* `devtools::document()` (GitHub Actions)

* `yarn build` (GitHub Actions)

* Bump version

* `yarn build` (GitHub Actions)

* Sync package version (GitHub Actions)

* Apply suggestions from code review

Co-authored-by: Garrick Aden-Buie <garrick@adenbuie.com>

* Update snapshots

* `devtools::document()` (GitHub Actions)

* Address feedback

* Bring in more spinner type options

* fix use of fs

* Code review

* `devtools::document()` (GitHub Actions)

* Sync package version (GitHub Actions)

* Update snapshots

* Fix comments

* Make snapshot consistent cross-platform

* Fix namespace issue

* Reduce specificity of position relative

* Skip snapshot on windows; update news

* Whoops

* Scope spinner customizations to parent element by default

* Update snapshots

* Reorder spinner types

* Set a private random seed in tests

* Better id naming

---------

Co-authored-by: cpsievert <cpsievert@users.noreply.github.com>
Co-authored-by: Garrick Aden-Buie <garrick@adenbuie.com>

DESCRIPTION

@@ -1,7 +1,7 @@
 Package: shiny
 Type: Package
 Title: Web Application Framework for R
-Version: 1.8.1.9000
+Version: 1.8.1.9001
 Authors@R: c(
     person("Winston", "Chang", role = c("aut", "cre"), email = "winston@posit.co", comment = c(ORCID = "0000-0002-1576-2126")),
     person("Joe", "Cheng", role = "aut", email = "joe@posit.co"),
@@ -128,6 +128,8 @@ Collate:
     'map.R'
     'utils.R'
     'bootstrap.R'
+    'busy-indicators-spinners.R'
+    'busy-indicators.R'
     'cache-utils.R'
     'deprecated.R'
     'devmode.R'

NAMESPACE

@@ -78,6 +78,7 @@ export(br)
 export(browserViewer)
 export(brushOpts)
 export(brushedPoints)
+export(busyIndicatorOptions)
 export(callModule)
 export(captureStackTraces)
 export(checkboxGroupInput)
@@ -317,6 +318,7 @@ export(updateTextInput)
 export(updateVarSelectInput)
 export(updateVarSelectizeInput)
 export(urlModal)
+export(useBusyIndicators)
 export(validate)
 export(validateCssUnit)
 export(varSelectInput)

NEWS.md

@@ -2,6 +2,7 @@
 
 ## New features and improvements
 
+* Added new functions, `useBusyIndicators()` and `busyIndicatorOptions()`, for enabling and customizing busy indication. Busy indicators provide a visual cue to users when the server is busy calculating outputs or otherwise serving requests to the client. When enabled, a spinner is shown on each calculating/recalculating output, and a pulsing banner is shown at the top of the page when the app is otherwise busy. (#4040)
 * Output bindings now include the `.recalculating` CSS class when they are first bound, up until the first render. This makes it possible/easier to show progress indication when the output is calculating for the first time. (#4039)
 
 ## Bug fixes

R/busy-indicators-spinners.R

@@ -0,0 +1,4 @@
+# Generated by tools/updateSpinnerTypes.R: do not edit by hand
+.busySpinnerTypes <-
+  c("ring", "ring2", "ring3", "bars", "bars2", "bars3", "pulse", 
+  "pulse2", "pulse3", "dots", "dots2", "dots3")

R/busy-indicators.R

@@ -0,0 +1,250 @@
+#' Enable/disable busy indication
+#'
+#' Busy indicators provide a visual cue to users when the server is busy
+#' calculating outputs or otherwise performing tasks (e.g., producing
+#' downloads). When enabled, a spinner is shown on each
+#' calculating/recalculating output, and a pulsing banner is shown at the top of
+#' the page when the app is otherwise busy. Busy indication is enabled by
+#' default for UI created with \pkg{bslib}, but must be enabled otherwise. To
+#' enable/disable, include the result of this function in anywhere in the app's
+#' UI.
+#'
+#' When both `spinners` and `pulse` are set to `TRUE`, the pulse is
+#' automatically disabled when spinner(s) are active. When both `spinners` and
+#' `pulse` are set to `FALSE`, no busy indication is shown (other than the
+#' graying out of recalculating outputs).
+#'
+#' @param ... Currently ignored.
+#' @param spinners Whether to show a spinner on each calculating/recalculating
+#'   output.
+#' @param pulse Whether to show a pulsing banner at the top of the page when the
+#'   app is busy.
+#'
+#' @export
+#' @seealso [busyIndicatorOptions()] for customizing the appearance of the busy
+#'   indicators.
+#' @examplesIf rlang::is_interactive()
+#'
+#' library(bslib)
+#'
+#' ui <- page_fillable(
+#'   useBusyIndicators(),
+#'   card(
+#'     card_header(
+#'       "A plot",
+#'       input_task_button("simulate", "Simulate"),
+#'       class = "d-flex justify-content-between align-items-center"
+#'     ),
+#'     plotOutput("p"),
+#'   )
+#' )
+#'
+#' server <- function(input, output) {
+#'   output$p <- renderPlot({
+#'     input$simulate
+#'     Sys.sleep(4)
+#'     plot(x = rnorm(100), y = rnorm(100))
+#'   })
+#' }
+#'
+#' shinyApp(ui, server)
+useBusyIndicators <- function(..., spinners = TRUE, pulse = TRUE) {
+
+  rlang::check_dots_empty()
+
+  attrs <- list("shinyBusySpinners" = spinners, "shinyBusyPulse" = pulse)
+
+  js <- vapply(names(attrs), character(1), FUN = function(key) {
+    if (attrs[[key]]) {
+      sprintf("document.documentElement.dataset.%s = 'true';", key)
+    } else {
+      sprintf("delete document.documentElement.dataset.%s;", key)
+    }
+  })
+
+  js <- HTML(paste(js, collapse = "\n"))
+
+  # TODO: it'd be nice if htmltools had something like a page_attrs() that allowed us
+  # to do this without needing to inject JS into the head.
+  tags$script(js)
+}
+
+#' Customize busy indicator options
+#'
+#' When busy indicators are enabled (see [useBusyIndicators()]), a spinner is
+#' shown on each calculating/recalculating output, and a pulsing banner is shown
+#' at the top of the page when the app is otherwise busy. This function allows
+#' you to customize the appearance of those busy indicators. To apply the
+#' customization, include the result of this function inside the app's UI.
+#'
+#' @param ... Currently ignored.
+#' @param spinner_type The type of spinner. Pre-bundled types include:
+#'   '`r paste0(.busySpinnerTypes, collapse = "', '")`'.
+#'
+#'   A path to a local SVG file can also be provided. The SVG should adhere to
+#'   the following rules:
+#'   * The SVG itself should contain the animation.
+#'   * It should avoid absolute sizes (the spinner's containing DOM element
+#'     size is set in CSS by `spinner_size`, so it should fill that container).
+#'   * It should avoid setting absolute colors (the spinner's containing DOM element
+#'     color is set in CSS by `spinner_color`, so it should inherit that color).
+#' @param spinner_color The color of the spinner. This can be any valid CSS
+#'   color. Defaults to the app's "primary" color if Bootstrap is on the page.
+#' @param spinner_size The size of the spinner. This can be any valid CSS size.
+#' @param spinner_delay The amount of time to wait before showing the spinner.
+#'   This can be any valid CSS time and can be useful for not showing the spinner
+#'   if the computation finishes quickly.
+#' @param spinner_selector A character string containing a CSS selector for
+#'   scoping the spinner customization. The default (`NULL`) will apply the
+#'   spinner customization to the parent element of the spinner.
+#' @param pulse_background A CSS background definition for the pulse. The
+#'   default uses a
+#'   [linear-gradient](https://developer.mozilla.org/en-US/docs/Web/CSS/gradient/linear-gradient)
+#'   of the theme's indigo, purple, and pink colors.
+#' @param pulse_height The height of the pulsing banner. This can be any valid
+#'   CSS size.
+#' @param pulse_speed The speed of the pulsing banner. This can be any valid CSS
+#'   time.
+#'
+#' @export
+#' @seealso [useBusyIndicators()] for enabling/disabling busy indicators.
+#' @examplesIf rlang::is_interactive()
+#'
+#' library(bslib)
+#'
+#' card_ui <- function(id, spinner_type = id) {
+#'   card(
+#'     busyIndicatorOptions(spinner_type = spinner_type),
+#'     card_header(paste("Spinner:", spinner_type)),
+#'     plotOutput(shiny::NS(id, "plot"))
+#'   )
+#' }
+#'
+#' card_server <- function(id, simulate = reactive()) {
+#'   moduleServer(
+#'     id = id,
+#'     function(input, output, session) {
+#'       output$plot <- renderPlot({
+#'         Sys.sleep(1)
+#'         simulate()
+#'         plot(x = rnorm(100), y = rnorm(100))
+#'       })
+#'     }
+#'   )
+#' }
+#'
+#' ui <- page_fillable(
+#'   useBusyIndicators(),
+#'   input_task_button("simulate", "Simulate", icon = icon("refresh")),
+#'   layout_columns(
+#'     card_ui("ring"),
+#'     card_ui("bars"),
+#'     card_ui("dots"),
+#'     card_ui("pulse"),
+#'     col_widths = 6
+#'   )
+#' )
+#'
+#' server <- function(input, output, session) {
+#'   simulate <- reactive(input$simulate)
+#'   card_server("ring", simulate)
+#'   card_server("bars", simulate)
+#'   card_server("dots", simulate)
+#'   card_server("pulse", simulate)
+#' }
+#'
+#' shinyApp(ui, server)
+#'
+busyIndicatorOptions <- function(
+  ...,
+  spinner_type = NULL,
+  spinner_color = NULL,
+  spinner_size = NULL,
+  spinner_delay = NULL,
+  spinner_selector = NULL,
+  pulse_background = NULL,
+  pulse_height = NULL,
+  pulse_speed = NULL
+) {
+
+  rlang::check_dots_empty()
+
+  res <- tagList(
+    spinnerOptions(
+      type = spinner_type,
+      color = spinner_color,
+      size = spinner_size,
+      delay = spinner_delay,
+      selector = spinner_selector
+    ),
+    pulseOptions(
+      background = pulse_background,
+      height = pulse_height,
+      speed = pulse_speed
+    )
+  )
+
+  bslib::as.card_item(dropNulls(res))
+}
+
+
+spinnerOptions <- function(type = NULL, color = NULL, size = NULL, delay = NULL, selector = NULL) {
+  if (is.null(type) && is.null(color) && is.null(size) && is.null(delay) && is.null(selector)) {
+    return(NULL)
+  }
+
+  url <- NULL
+  if (!is.null(type)) {
+    stopifnot(is.character(type) && length(type) == 1)
+    if (file.exists(type) && grepl("\\.svg$", type)) {
+      typeRaw <- readBin(type, "raw", n = file.info(type)$size)
+      url <- sprintf("url('data:image/svg+xml;base64,%s')", rawToBase64(typeRaw))
+    } else {
+      type <- rlang::arg_match(type, .busySpinnerTypes)
+      url <- sprintf("url('spinners/%s.svg')", type)
+    }
+  }
+
+  # Options controlled via CSS variables.
+  css_vars <- htmltools::css(
+    "--shiny-spinner-url" = url,
+    "--shiny-spinner-color" = htmltools::parseCssColors(color),
+    "--shiny-spinner-size" = htmltools::validateCssUnit(size),
+    "--shiny-spinner-delay" = delay
+  )
+
+  id <- NULL
+  if (is.null(selector)) {
+    id <- paste0("spinner-options-", p_randomInt(100, 1000000))
+    selector <- sprintf(":has(> #%s)", id)
+  }
+
+  css <- HTML(paste0(selector, " {", css_vars, "}"))
+
+  tags$style(css, id = id)
+}
+
+pulseOptions <- function(background = NULL, height = NULL, speed = NULL) {
+  if (is.null(background) && is.null(height) && is.null(speed))  {
+    return(NULL)
+  }
+
+  css_vars <- htmltools::css(
+    "--shiny-pulse-background" = background,
+    "--shiny-pulse-height" = htmltools::validateCssUnit(height),
+    "--shiny-pulse-speed" = speed
+  )
+
+  tags$style(HTML(paste0(":root {", css_vars, "}")))
+}
+
+busyIndicatorDependency <- function() {
+  htmlDependency(
+    name = "shiny-busy-indicators",
+    version = get_package_version("shiny"),
+    src = "www/shared/busy-indicators",
+    package = "shiny",
+    stylesheet = "busy-indicators.css",
+    script = "busy-indicators.js"
+  )
+}

R/shinyui.R

@@ -114,6 +114,7 @@ jqueryDependency <- function() {
 shinyDependencies <- function() {
   list(
     bslib::bs_dependency_defer(shinyDependencyCSS),
+    busyIndicatorDependency(),
     htmlDependency(
       name = "shiny-javascript",
       version = get_package_version("shiny"),

inst/www/shared/busy-indicators/busy-indicators.css

@@ -0,0 +1,2 @@
+/*! shiny 1.8.1.9001 | (c) 2012-2024 RStudio, PBC. | License: GPL-3 | file LICENSE */
+:where([data-shiny-busy-spinners] .recalculating){position:relative}[data-shiny-busy-spinners] .recalculating{opacity:1}[data-shiny-busy-spinners] .recalculating:after{position:absolute;content:"";--_shiny-spinner-url: var(--shiny-spinner-url, url(spinners/ring.svg));--_shiny-spinner-color: var(--shiny-spinner-color, var(--bs-primary, #007bc2));--_shiny-spinner-size: var(--shiny-spinner-size, 32px);--_shiny-spinner-delay: var(--shiny-spinner-delay, .5s);background:var(--_shiny-spinner-color);width:var(--_shiny-spinner-size);height:var(--_shiny-spinner-size);inset:calc(50% - var(--_shiny-spinner-size) / 2);mask-image:var(--_shiny-spinner-url);-webkit-mask-image:var(--_shiny-spinner-url);animation-name:fade-in;animation-duration:var(--_shiny-spinner-delay)}[data-shiny-busy-spinners] .recalculating>*:not(.recalculating){opacity:.2}[data-shiny-busy-spinners] .recalculating.shiny-html-output:after{display:none}[data-shiny-busy-spinners][data-shiny-busy-pulse].shiny-busy:not(:has(.recalculating)):after{--_shiny-pulse-background: var( --shiny-pulse-background, linear-gradient( 120deg, var(--bs-body-bg, #fff), var(--bs-indigo, #4b00c1), var(--bs-purple, #74149c), var(--bs-pink, #bf007f), var(--bs-body-bg, #fff) ) );--_shiny-pulse-height: var(--shiny-pulse-height, 5px);--_shiny-pulse-speed: var(--shiny-pulse-speed, 1.85s);position:fixed;top:0;left:0;height:var(--_shiny-pulse-height);background:var(--_shiny-pulse-background);border-radius:50%;z-index:9999;animation-name:busy-page-pulse;animation-duration:var(--_shiny-pulse-speed);animation-iteration-count:infinite;animation-timing-function:ease-in-out;content:""}[data-shiny-busy-spinners][data-shiny-busy-pulse].shiny-not-yet-idle:not(:has(.recalculating)):after{--_shiny-pulse-background: var( --shiny-pulse-background, linear-gradient( 120deg, var(--bs-body-bg, #fff), var(--bs-indigo, #4b00c1), var(--bs-purple, #74149c), var(--bs-pink, #bf007f), var(--bs-body-bg, #fff) ) );--_shiny-pulse-height: var(--shiny-pulse-height, 5px);--_shiny-pulse-speed: var(--shiny-pulse-speed, 1.85s);position:fixed;top:0;left:0;height:var(--_shiny-pulse-height);background:var(--_shiny-pulse-background);border-radius:50%;z-index:9999;animation-name:busy-page-pulse;animation-duration:var(--_shiny-pulse-speed);animation-iteration-count:infinite;animation-timing-function:ease-in-out;content:""}[data-shiny-busy-pulse]:not([data-shiny-busy-spinners]).shiny-busy:after{--_shiny-pulse-background: var( --shiny-pulse-background, linear-gradient( 120deg, var(--bs-body-bg, #fff), var(--bs-indigo, #4b00c1), var(--bs-purple, #74149c), var(--bs-pink, #bf007f), var(--bs-body-bg, #fff) ) );--_shiny-pulse-height: var(--shiny-pulse-height, 5px);--_shiny-pulse-speed: var(--shiny-pulse-speed, 1.85s);position:fixed;top:0;left:0;height:var(--_shiny-pulse-height);background:var(--_shiny-pulse-background);border-radius:50%;z-index:9999;animation-name:busy-page-pulse;animation-duration:var(--_shiny-pulse-speed);animation-iteration-count:infinite;animation-timing-function:ease-in-out;content:""}[data-shiny-busy-pulse]:not([data-shiny-busy-spinners]).shiny-not-yet-idle:after{--_shiny-pulse-background: var( --shiny-pulse-background, linear-gradient( 120deg, var(--bs-body-bg, #fff), var(--bs-indigo, #4b00c1), var(--bs-purple, #74149c), var(--bs-pink, #bf007f), var(--bs-body-bg, #fff) ) );--_shiny-pulse-height: var(--shiny-pulse-height, 5px);--_shiny-pulse-speed: var(--shiny-pulse-speed, 1.85s);position:fixed;top:0;left:0;height:var(--_shiny-pulse-height);background:var(--_shiny-pulse-background);border-radius:50%;z-index:9999;animation-name:busy-page-pulse;animation-duration:var(--_shiny-pulse-speed);animation-iteration-count:infinite;animation-timing-function:ease-in-out;content:""}@keyframes fade-in{0%{opacity:0}99%{opacity:0}to{opacity:1}}@keyframes busy-page-pulse{0%{left:-75%;width:75%}50%{left:100%;width:75%}to{left:-75%;width:75%}}

inst/www/shared/busy-indicators/busy-indicators.js

@@ -0,0 +1,3 @@
+/*! shiny 1.8.1.9001 | (c) 2012-2024 RStudio, PBC. | License: GPL-3 | file LICENSE */
+"use strict";(function(){document.documentElement.classList.add("shiny-not-yet-idle");$(document).one("shiny:idle",function(){document.documentElement.classList.remove("shiny-not-yet-idle")});})();
+//# sourceMappingURL=busy-indicators.js.map

inst/www/shared/busy-indicators/busy-indicators.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../srcts/extras/busy-indicators/busy-indicators.ts"],
+  "sourcesContent": ["// Think of this like the .shiny-busy class that shiny.js puts on the root element,\n// except it's added before shiny.js is initialized, connected, etc.\ndocument.documentElement.classList.add(\"shiny-not-yet-idle\");\n$(document).one(\"shiny:idle\", function () {\n  document.documentElement.classList.remove(\"shiny-not-yet-idle\");\n});"],
+  "mappings": ";yBAEA,SAAS,gBAAgB,UAAU,IAAI,oBAAoB,EAC3D,EAAE,QAAQ,EAAE,IAAI,aAAc,UAAY,CACxC,SAAS,gBAAgB,UAAU,OAAO,oBAAoB,CAChE,CAAC",
+  "names": []
+}

inst/www/shared/busy-indicators/spinners/LICENSE

@@ -0,0 +1,20 @@
+The MIT License (MIT)
+
+Copyright (c) Utkarsh Verma
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of
+this software and associated documentation files (the "Software"), to deal in
+the Software without restriction, including without limitation the rights to
+use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of
+the Software, and to permit persons to whom the Software is furnished to do so,
+subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS
+FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR
+COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER
+IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
+CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

inst/www/shared/busy-indicators/spinners/bars.svg

@@ -0,0 +1 @@
+<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><style>.spinner_hzlK{animation:spinner_vc4H .8s linear infinite;animation-delay:-.8s}.spinner_koGT{animation-delay:-.65s}.spinner_YF1u{animation-delay:-.5s}@keyframes spinner_vc4H{0%{y:1px;height:22px}93.75%{y:5px;height:14px;opacity:.2}}</style><rect class="spinner_hzlK" x="1" y="1" width="6" height="22"/><rect class="spinner_hzlK spinner_koGT" x="9" y="1" width="6" height="22"/><rect class="spinner_hzlK spinner_YF1u" x="17" y="1" width="6" height="22"/></svg>

inst/www/shared/busy-indicators/spinners/bars2.svg

@@ -0,0 +1 @@
+<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><style>.spinner_jCIR{animation:spinner_B8Vq .9s linear infinite;animation-delay:-.9s}.spinner_upm8{animation-delay:-.8s}.spinner_2eL5{animation-delay:-.7s}.spinner_Rp9l{animation-delay:-.6s}.spinner_dy3W{animation-delay:-.5s}@keyframes spinner_B8Vq{0%,66.66%{animation-timing-function:cubic-bezier(0.36,.61,.3,.98);y:6px;height:12px}33.33%{animation-timing-function:cubic-bezier(0.36,.61,.3,.98);y:1px;height:22px}}</style><rect class="spinner_jCIR" x="1" y="6" width="2.8" height="12"/><rect class="spinner_jCIR spinner_upm8" x="5.8" y="6" width="2.8" height="12"/><rect class="spinner_jCIR spinner_2eL5" x="10.6" y="6" width="2.8" height="12"/><rect class="spinner_jCIR spinner_Rp9l" x="15.4" y="6" width="2.8" height="12"/><rect class="spinner_jCIR spinner_dy3W" x="20.2" y="6" width="2.8" height="12"/></svg>

inst/www/shared/busy-indicators/spinners/bars3.svg

@@ -0,0 +1 @@
+<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><style>.spinner_OSmW{transform-origin:center;animation:spinner_T6mA .75s step-end infinite}@keyframes spinner_T6mA{8.3%{transform:rotate(30deg)}16.6%{transform:rotate(60deg)}25%{transform:rotate(90deg)}33.3%{transform:rotate(120deg)}41.6%{transform:rotate(150deg)}50%{transform:rotate(180deg)}58.3%{transform:rotate(210deg)}66.6%{transform:rotate(240deg)}75%{transform:rotate(270deg)}83.3%{transform:rotate(300deg)}91.6%{transform:rotate(330deg)}100%{transform:rotate(360deg)}}</style><g class="spinner_OSmW"><rect x="11" y="1" width="2" height="5" opacity=".14"/><rect x="11" y="1" width="2" height="5" transform="rotate(30 12 12)" opacity=".29"/><rect x="11" y="1" width="2" height="5" transform="rotate(60 12 12)" opacity=".43"/><rect x="11" y="1" width="2" height="5" transform="rotate(90 12 12)" opacity=".57"/><rect x="11" y="1" width="2" height="5" transform="rotate(120 12 12)" opacity=".71"/><rect x="11" y="1" width="2" height="5" transform="rotate(150 12 12)" opacity=".86"/><rect x="11" y="1" width="2" height="5" transform="rotate(180 12 12)"/></g></svg>

inst/www/shared/busy-indicators/spinners/dots.svg

@@ -0,0 +1 @@
+<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><style>.spinner_b2T7{animation:spinner_xe7Q .8s linear infinite}.spinner_YRVV{animation-delay:-.65s}.spinner_c9oY{animation-delay:-.5s}@keyframes spinner_xe7Q{93.75%,100%{r:3px}46.875%{r:.2px}}</style><circle class="spinner_b2T7" cx="4" cy="12" r="3"/><circle class="spinner_b2T7 spinner_YRVV" cx="12" cy="12" r="3"/><circle class="spinner_b2T7 spinner_c9oY" cx="20" cy="12" r="3"/></svg>

inst/www/shared/busy-indicators/spinners/dots2.svg

@@ -0,0 +1 @@
+<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><style>.spinner_Wezc{transform-origin:center;animation:spinner_Oiah .75s step-end infinite}@keyframes spinner_Oiah{8.3%{transform:rotate(30deg)}16.6%{transform:rotate(60deg)}25%{transform:rotate(90deg)}33.3%{transform:rotate(120deg)}41.6%{transform:rotate(150deg)}50%{transform:rotate(180deg)}58.3%{transform:rotate(210deg)}66.6%{transform:rotate(240deg)}75%{transform:rotate(270deg)}83.3%{transform:rotate(300deg)}91.6%{transform:rotate(330deg)}100%{transform:rotate(360deg)}}</style><g class="spinner_Wezc"><circle cx="12" cy="2.5" r="1.5" opacity=".14"/><circle cx="16.75" cy="3.77" r="1.5" opacity=".29"/><circle cx="20.23" cy="7.25" r="1.5" opacity=".43"/><circle cx="21.50" cy="12.00" r="1.5" opacity=".57"/><circle cx="20.23" cy="16.75" r="1.5" opacity=".71"/><circle cx="16.75" cy="20.23" r="1.5" opacity=".86"/><circle cx="12" cy="21.5" r="1.5"/></g></svg>

inst/www/shared/busy-indicators/spinners/dots3.svg

@@ -0,0 +1 @@
+<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><style>.spinner_DupU{animation:spinner_sM3D 1.2s infinite}.spinner_GWtZ{animation-delay:.1s}.spinner_dwN6{animation-delay:.2s}.spinner_46QP{animation-delay:.3s}.spinner_PD82{animation-delay:.4s}.spinner_eUgh{animation-delay:.5s}.spinner_eUaP{animation-delay:.6s}.spinner_j38H{animation-delay:.7s}.spinner_tVmX{animation-delay:.8s}.spinner_DQhX{animation-delay:.9s}.spinner_GIL4{animation-delay:1s}.spinner_n0Yb{animation-delay:1.1s}@keyframes spinner_sM3D{0%,50%{animation-timing-function:cubic-bezier(0,1,0,1);r:0}10%{animation-timing-function:cubic-bezier(.53,0,.61,.73);r:2px}}</style><circle class="spinner_DupU" cx="12" cy="3" r="0"/><circle class="spinner_DupU spinner_GWtZ" cx="16.50" cy="4.21" r="0"/><circle class="spinner_DupU spinner_n0Yb" cx="7.50" cy="4.21" r="0"/><circle class="spinner_DupU spinner_dwN6" cx="19.79" cy="7.50" r="0"/><circle class="spinner_DupU spinner_GIL4" cx="4.21" cy="7.50" r="0"/><circle class="spinner_DupU spinner_46QP" cx="21.00" cy="12.00" r="0"/><circle class="spinner_DupU spinner_DQhX" cx="3.00" cy="12.00" r="0"/><circle class="spinner_DupU spinner_PD82" cx="19.79" cy="16.50" r="0"/><circle class="spinner_DupU spinner_tVmX" cx="4.21" cy="16.50" r="0"/><circle class="spinner_DupU spinner_eUgh" cx="16.50" cy="19.79" r="0"/><circle class="spinner_DupU spinner_j38H" cx="7.50" cy="19.79" r="0"/><circle class="spinner_DupU spinner_eUaP" cx="12" cy="21" r="0"/></svg>

inst/www/shared/busy-indicators/spinners/pulse.svg

@@ -0,0 +1 @@
+<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><style>.spinner_ZCsl{animation:spinner_qV4G 1.2s cubic-bezier(0.52,.6,.25,.99) infinite}.spinner_gaIW{animation-delay:.6s}@keyframes spinner_qV4G{0%{r:0;opacity:1}100%{r:11px;opacity:0}}</style><circle class="spinner_ZCsl" cx="12" cy="12" r="0"/><circle class="spinner_ZCsl spinner_gaIW" cx="12" cy="12" r="0"/></svg>

inst/www/shared/busy-indicators/spinners/pulse2.svg

@@ -0,0 +1 @@
+<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><style>.spinner_ngNb{animation:spinner_ZRWK 1.2s cubic-bezier(0.52,.6,.25,.99) infinite}.spinner_6TBP{animation-delay:.6s}@keyframes spinner_ZRWK{0%{transform:translate(12px,12px) scale(0);opacity:1}100%{transform:translate(0,0) scale(1);opacity:0}}</style><path class="spinner_ngNb" d="M12,1A11,11,0,1,0,23,12,11,11,0,0,0,12,1Zm0,20a9,9,0,1,1,9-9A9,9,0,0,1,12,21Z" transform="translate(12, 12) scale(0)"/><path class="spinner_ngNb spinner_6TBP" d="M12,1A11,11,0,1,0,23,12,11,11,0,0,0,12,1Zm0,20a9,9,0,1,1,9-9A9,9,0,0,1,12,21Z" transform="translate(12, 12) scale(0)"/></svg>

inst/www/shared/busy-indicators/spinners/pulse3.svg

@@ -0,0 +1 @@
+<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><style>.spinner_Uvk8{animation:spinner_otJF 1.6s cubic-bezier(.52,.6,.25,.99) infinite}.spinner_ypeD{animation-delay:.2s}.spinner_y0Rj{animation-delay:.4s}@keyframes spinner_otJF{0%{transform:translate(12px,12px) scale(0);opacity:1}75%,100%{transform:translate(0,0) scale(1);opacity:0}}</style><path class="spinner_Uvk8" d="M12,1A11,11,0,1,0,23,12,11,11,0,0,0,12,1Zm0,20a9,9,0,1,1,9-9A9,9,0,0,1,12,21Z" transform="translate(12, 12) scale(0)"/><path class="spinner_Uvk8 spinner_ypeD" d="M12,1A11,11,0,1,0,23,12,11,11,0,0,0,12,1Zm0,20a9,9,0,1,1,9-9A9,9,0,0,1,12,21Z" transform="translate(12, 12) scale(0)"/><path class="spinner_Uvk8 spinner_y0Rj" d="M12,1A11,11,0,1,0,23,12,11,11,0,0,0,12,1Zm0,20a9,9,0,1,1,9-9A9,9,0,0,1,12,21Z" transform="translate(12, 12) scale(0)"/></svg>

inst/www/shared/busy-indicators/spinners/ring.svg

@@ -0,0 +1 @@
+<svg stroke="#000" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><style>.spinner_V8m1{transform-origin:center;animation:spinner_zKoa 2s linear infinite}.spinner_V8m1 circle{stroke-linecap:round;animation:spinner_YpZS 1.5s ease-in-out infinite}@keyframes spinner_zKoa{100%{transform:rotate(360deg)}}@keyframes spinner_YpZS{0%{stroke-dasharray:0 150;stroke-dashoffset:0}47.5%{stroke-dasharray:42 150;stroke-dashoffset:-16}95%,100%{stroke-dasharray:42 150;stroke-dashoffset:-59}}</style><g class="spinner_V8m1"><circle cx="12" cy="12" r="9.5" fill="none" stroke-width="3"></circle></g></svg>

inst/www/shared/busy-indicators/spinners/ring2.svg

@@ -0,0 +1 @@
+<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><style>.spinner_ajPY{transform-origin:center;animation:spinner_AtaB .75s infinite linear}@keyframes spinner_AtaB{100%{transform:rotate(360deg)}}</style><path d="M12,1A11,11,0,1,0,23,12,11,11,0,0,0,12,1Zm0,19a8,8,0,1,1,8-8A8,8,0,0,1,12,20Z" opacity=".25"/><path d="M10.14,1.16a11,11,0,0,0-9,8.92A1.59,1.59,0,0,0,2.46,12,1.52,1.52,0,0,0,4.11,10.7a8,8,0,0,1,6.66-6.61A1.42,1.42,0,0,0,12,2.69h0A1.57,1.57,0,0,0,10.14,1.16Z" class="spinner_ajPY"/></svg>

inst/www/shared/busy-indicators/spinners/ring3.svg

@@ -0,0 +1 @@
+<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><style>.spinner_aj0A{transform-origin:center;animation:spinner_KYSC .75s infinite linear}@keyframes spinner_KYSC{100%{transform:rotate(360deg)}}</style><path d="M12,4a8,8,0,0,1,7.89,6.7A1.53,1.53,0,0,0,21.38,12h0a1.5,1.5,0,0,0,1.48-1.75,11,11,0,0,0-21.72,0A1.5,1.5,0,0,0,2.62,12h0a1.53,1.53,0,0,0,1.49-1.3A8,8,0,0,1,12,4Z" class="spinner_aj0A"/></svg>

inst/www/shared/shiny-showcase.css

@@ -1,2 +1,2 @@
-/*! shiny 1.8.1.9000 | (c) 2012-2024 RStudio, PBC. | License: GPL-3 | file LICENSE */
+/*! shiny 1.8.1.9001 | (c) 2012-2024 RStudio, PBC. | License: GPL-3 | file LICENSE */
 #showcase-well{border-radius:0}.shiny-code{background-color:#fff;margin-bottom:0}.shiny-code code{font-family:Menlo,Consolas,Courier New,monospace}.shiny-code-container{margin-top:20px;clear:both}.shiny-code-container h3{display:inline;margin-right:15px}.showcase-header{font-size:16px;font-weight:400}.showcase-code-link{text-align:right;padding:15px}#showcase-app-container{vertical-align:top}#showcase-code-tabs{margin-right:15px}#showcase-code-tabs pre{border:none;line-height:1em}#showcase-code-tabs .nav,#showcase-code-tabs ul{margin-bottom:0}#showcase-code-tabs .tab-content{border-style:solid;border-color:#e5e5e5;border-width:0px 1px 1px 1px;overflow:auto;border-bottom-right-radius:4px;border-bottom-left-radius:4px}#showcase-app-code{width:100%}#showcase-code-position-toggle{float:right}#showcase-sxs-code{padding-top:20px;vertical-align:top}.showcase-code-license{display:block;text-align:right}#showcase-code-content pre{background-color:#fff}

inst/www/shared/shiny-testmode.js

@@ -1,3 +1,3 @@
-/*! shiny 1.8.1.9000 | (c) 2012-2024 RStudio, PBC. | License: GPL-3 | file LICENSE */
+/*! shiny 1.8.1.9001 | (c) 2012-2024 RStudio, PBC. | License: GPL-3 | file LICENSE */
 "use strict";(function(){var a=eval;window.addEventListener("message",function(i){var e=i.data;e.code&&a(e.code)});})();
 //# sourceMappingURL=shiny-testmode.js.map

inst/www/shared/shiny.js

@@ -1,4 +1,4 @@
-/*! shiny 1.8.1.9000 | (c) 2012-2024 RStudio, PBC. | License: GPL-3 | file LICENSE */
+/*! shiny 1.8.1.9001 | (c) 2012-2024 RStudio, PBC. | License: GPL-3 | file LICENSE */
 "use strict";
 (function() {
   var __create = Object.create;
@@ -12074,6 +12074,13 @@
         el.removeAttribute("aria-disabled");
         el.removeAttribute("tabindex");
       }
+    }, {
+      key: "showProgress",
+      value: function showProgress(el, show3) {
+        return;
+        el;
+        show3;
+      }
     }]);
     return DownloadLinkOutputBinding2;
   }(OutputBinding);
@@ -25542,7 +25549,7 @@
   var windowShiny2;
   function setShiny(windowShiny_) {
     windowShiny2 = windowShiny_;
-    windowShiny2.version = "1.8.1.9000";
+    windowShiny2.version = "1.8.1.9001";
     var _initInputBindings = initInputBindings(), inputBindings = _initInputBindings.inputBindings, fileInputBinding2 = _initInputBindings.fileInputBinding;
     var _initOutputBindings = initOutputBindings(), outputBindings = _initOutputBindings.outputBindings;
     setFileInputBinding(fileInputBinding2);

man/busyIndicatorOptions.Rd

@@ -0,0 +1,117 @@
+% Generated by roxygen2: do not edit by hand
+% Please edit documentation in R/busy-indicators.R
+\name{busyIndicatorOptions}
+\alias{busyIndicatorOptions}
+\title{Customize busy indicator options}
+\usage{
+busyIndicatorOptions(
+  ...,
+  spinner_type = NULL,
+  spinner_color = NULL,
+  spinner_size = NULL,
+  spinner_delay = NULL,
+  spinner_selector = NULL,
+  pulse_background = NULL,
+  pulse_height = NULL,
+  pulse_speed = NULL
+)
+}
+\arguments{
+\item{...}{Currently ignored.}
+
+\item{spinner_type}{The type of spinner. Pre-bundled types include:
+'ring', 'ring2', 'ring3', 'bars', 'bars2', 'bars3', 'pulse', 'pulse2', 'pulse3', 'dots', 'dots2', 'dots3'.
+
+A path to a local SVG file can also be provided. The SVG should adhere to
+the following rules:
+\itemize{
+\item The SVG itself should contain the animation.
+\item It should avoid absolute sizes (the spinner's containing DOM element
+size is set in CSS by \code{spinner_size}, so it should fill that container).
+\item It should avoid setting absolute colors (the spinner's containing DOM element
+color is set in CSS by \code{spinner_color}, so it should inherit that color).
+}}
+
+\item{spinner_color}{The color of the spinner. This can be any valid CSS
+color. Defaults to the app's "primary" color if Bootstrap is on the page.}
+
+\item{spinner_size}{The size of the spinner. This can be any valid CSS size.}
+
+\item{spinner_delay}{The amount of time to wait before showing the spinner.
+This can be any valid CSS time and can be useful for not showing the spinner
+if the computation finishes quickly.}
+
+\item{spinner_selector}{A character string containing a CSS selector for
+scoping the spinner customization. The default (\code{NULL}) will apply the
+spinner customization to the parent element of the spinner.}
+
+\item{pulse_background}{A CSS background definition for the pulse. The
+default uses a
+\href{https://developer.mozilla.org/en-US/docs/Web/CSS/gradient/linear-gradient}{linear-gradient}
+of the theme's indigo, purple, and pink colors.}
+
+\item{pulse_height}{The height of the pulsing banner. This can be any valid
+CSS size.}
+
+\item{pulse_speed}{The speed of the pulsing banner. This can be any valid CSS
+time.}
+}
+\description{
+When busy indicators are enabled (see \code{\link[=useBusyIndicators]{useBusyIndicators()}}), a spinner is
+shown on each calculating/recalculating output, and a pulsing banner is shown
+at the top of the page when the app is otherwise busy. This function allows
+you to customize the appearance of those busy indicators. To apply the
+customization, include the result of this function inside the app's UI.
+}
+\examples{
+\dontshow{if (rlang::is_interactive()) (if (getRversion() >= "3.4") withAutoprint else force)(\{ # examplesIf}
+
+library(bslib)
+
+card_ui <- function(id, spinner_type = id) {
+  card(
+    busyIndicatorOptions(spinner_type = spinner_type),
+    card_header(paste("Spinner:", spinner_type)),
+    plotOutput(shiny::NS(id, "plot"))
+  )
+}
+
+card_server <- function(id, simulate = reactive()) {
+  moduleServer(
+    id = id,
+    function(input, output, session) {
+      output$plot <- renderPlot({
+        Sys.sleep(1)
+        simulate()
+        plot(x = rnorm(100), y = rnorm(100))
+      })
+    }
+  )
+}
+
+ui <- page_fillable(
+  useBusyIndicators(),
+  input_task_button("simulate", "Simulate", icon = icon("refresh")),
+  layout_columns(
+    card_ui("ring"),
+    card_ui("bars"),
+    card_ui("dots"),
+    card_ui("pulse"),
+    col_widths = 6
+  )
+)
+
+server <- function(input, output, session) {
+  simulate <- reactive(input$simulate)
+  card_server("ring", simulate)
+  card_server("bars", simulate)
+  card_server("dots", simulate)
+  card_server("pulse", simulate)
+}
+
+shinyApp(ui, server)
+\dontshow{\}) # examplesIf}
+}
+\seealso{
+\code{\link[=useBusyIndicators]{useBusyIndicators()}} for enabling/disabling busy indicators.
+}

man/useBusyIndicators.Rd

@@ -0,0 +1,65 @@
+% Generated by roxygen2: do not edit by hand
+% Please edit documentation in R/busy-indicators.R
+\name{useBusyIndicators}
+\alias{useBusyIndicators}
+\title{Enable/disable busy indication}
+\usage{
+useBusyIndicators(..., spinners = TRUE, pulse = TRUE)
+}
+\arguments{
+\item{...}{Currently ignored.}
+
+\item{spinners}{Whether to show a spinner on each calculating/recalculating
+output.}
+
+\item{pulse}{Whether to show a pulsing banner at the top of the page when the
+app is busy.}
+}
+\description{
+Busy indicators provide a visual cue to users when the server is busy
+calculating outputs or otherwise performing tasks (e.g., producing
+downloads). When enabled, a spinner is shown on each
+calculating/recalculating output, and a pulsing banner is shown at the top of
+the page when the app is otherwise busy. Busy indication is enabled by
+default for UI created with \pkg{bslib}, but must be enabled otherwise. To
+enable/disable, include the result of this function in anywhere in the app's
+UI.
+}
+\details{
+When both \code{spinners} and \code{pulse} are set to \code{TRUE}, the pulse is
+automatically disabled when spinner(s) are active. When both \code{spinners} and
+\code{pulse} are set to \code{FALSE}, no busy indication is shown (other than the
+graying out of recalculating outputs).
+}
+\examples{
+\dontshow{if (rlang::is_interactive()) (if (getRversion() >= "3.4") withAutoprint else force)(\{ # examplesIf}
+
+library(bslib)
+
+ui <- page_fillable(
+  useBusyIndicators(),
+  card(
+    card_header(
+      "A plot",
+      input_task_button("simulate", "Simulate"),
+      class = "d-flex justify-content-between align-items-center"
+    ),
+    plotOutput("p"),
+  )
+)
+
+server <- function(input, output) {
+  output$p <- renderPlot({
+    input$simulate
+    Sys.sleep(4)
+    plot(x = rnorm(100), y = rnorm(100))
+  })
+}
+
+shinyApp(ui, server)
+\dontshow{\}) # examplesIf}
+}
+\seealso{
+\code{\link[=busyIndicatorOptions]{busyIndicatorOptions()}} for customizing the appearance of the busy
+indicators.
+}

package.json

@@ -3,7 +3,7 @@
   "homepage": "https://shiny.rstudio.com",
   "repository": "github:rstudio/shiny",
   "name": "@types/rstudio-shiny",
-  "version": "1.8.1-alpha.9000",
+  "version": "1.8.1-alpha.9001",
   "license": "GPL-3.0-only",
   "main": "",
   "browser": "",

srcts/build/extras.ts

@@ -17,6 +17,7 @@ build({
     "srcts/extras/shiny-autoreload.ts",
     "srcts/extras/shiny-showcase.ts",
     "srcts/extras/shiny-testmode.ts",
+    "srcts/extras/busy-indicators/busy-indicators.ts",
   ],
   outdir: outDir,
 });
@@ -53,3 +54,11 @@ build({
   ],
   outfile: outDir + "shiny.min.css",
 });
+build({
+  ...sassOpts,
+  entryPoints: ["srcts/extras/busy-indicators/busy-indicators.scss"],
+  outfile: outDir + "busy-indicators/busy-indicators.css",
+  plugins: [sassPlugin()],
+  bundle: false,
+  metafile: true,
+});

srcts/extras/busy-indicators/busy-indicators.scss

@@ -0,0 +1,140 @@
+:where([data-shiny-busy-spinners] .recalculating) {
+  position: relative;
+}
+
+/* This data atttribute is set by ui.busy_indicators.use() */
+[data-shiny-busy-spinners] {
+
+  .recalculating {
+
+    &::after {
+      position: absolute;
+      content: "";
+
+      /* ui.busy_indicators.spinner_options() */
+      --_shiny-spinner-url: var(--shiny-spinner-url, url(spinners/ring.svg));
+      --_shiny-spinner-color: var(--shiny-spinner-color, var(--bs-primary, #007bc2));
+      --_shiny-spinner-size: var(--shiny-spinner-size, 32px);
+      --_shiny-spinner-delay: var(--shiny-spinner-delay, 0.5s);
+
+      background: var(--_shiny-spinner-color);
+      width: var(--_shiny-spinner-size);
+      height: var(--_shiny-spinner-size);
+      inset: calc(50% - var(--_shiny-spinner-size) / 2);
+
+      mask-image: var(--_shiny-spinner-url);
+      -webkit-mask-image: var(--_shiny-spinner-url);
+      
+      animation-name: fade-in;
+      animation-duration: var(--_shiny-spinner-delay);
+    }
+
+    /*
+      shiny.css puts `opacity: 0.3` on .recalculating, which unfortunately applies to
+      the spinner. Undo that, but still apply (smaller) opacity to immediate children
+      that aren't recalculating.
+    */
+    opacity: 1;
+    > *:not(.recalculating) {
+      opacity: 0.2;
+    }
+
+    /*
+      Disable spinner on uiOutput() mainly because (for other reasons) it has
+      `display:contents`, which breaks the ::after positioning.
+      Note that, even if we could position it, we'd probably want to disable it
+      if it has recalculating children.
+    */
+    &.shiny-html-output::after {
+      display: none;
+    }
+  }
+}
+
+/* Styles for the page-level pulse banner */
+@mixin shiny-page-busy {
+  /* ui.busy_indicators.pulse_options() */
+  --_shiny-pulse-background: var(
+    --shiny-pulse-background,
+    linear-gradient(
+      120deg,
+      var(--bs-body-bg, #fff),
+      var(--bs-indigo, #4b00c1),
+      var(--bs-purple, #74149c),
+      var(--bs-pink, #bf007f),
+      var(--bs-body-bg, #fff)
+    )
+  );
+  --_shiny-pulse-height: var(--shiny-pulse-height, 5px);
+  --_shiny-pulse-speed: var(--shiny-pulse-speed, 1.85s);
+
+  /* Color, sizing, & positioning */
+  position: fixed;
+  top: 0;
+  left: 0;
+  height: var(--_shiny-pulse-height);
+  background: var(--_shiny-pulse-background);
+  border-radius: 50%;
+  z-index: 9999;
+
+  /* Animation */
+  animation-name: busy-page-pulse;
+  animation-duration: var(--_shiny-pulse-speed);
+  animation-iteration-count: infinite;
+  animation-timing-function: ease-in-out;
+
+  content: ""; /* Used in a ::after context */
+}
+
+/*
+  In spinners+pulse mode (the recommended default), show a page-level banner if the
+  page is busy, but there are no recalculating elements.
+*/
+[data-shiny-busy-spinners][data-shiny-busy-pulse] {
+  &.shiny-busy:not(:has(.recalculating))::after {
+    @include shiny-page-busy;
+  }
+  &.shiny-not-yet-idle:not(:has(.recalculating))::after {
+    @include shiny-page-busy;
+  }
+}
+
+/* In pulse _only_ mode, show a page-level banner whenever shiny is busy. */
+[data-shiny-busy-pulse]:not([data-shiny-busy-spinners]) {
+  &.shiny-busy::after {
+    @include shiny-page-busy;
+  }
+  &.shiny-not-yet-idle::after {
+    @include shiny-page-busy;
+  }
+}
+
+/* Keyframes for the fading spinner */
+@keyframes fade-in {
+  0% {
+    opacity: 0;
+  }
+  99% {
+    opacity: 0;
+  }
+  100% {
+    opacity: 1;
+  }
+}
+
+/* Keyframes for the pulsing banner */
+@keyframes busy-page-pulse {
+  0% {
+    left: -75%;
+    width: 75%;
+  }
+  50% {
+    left: 100%;
+    width: 75%;
+  }
+  /* Go back */
+  100% {
+    left: -75%;
+    width: 75%;
+  }
+}

srcts/extras/busy-indicators/busy-indicators.ts

@@ -0,0 +1,6 @@
+// Think of this like the .shiny-busy class that shiny.js puts on the root element,
+// except it's added before shiny.js is initialized, connected, etc.
+document.documentElement.classList.add("shiny-not-yet-idle");
+$(document).one("shiny:idle", function () {
+  document.documentElement.classList.remove("shiny-not-yet-idle");
+});

srcts/src/bindings/output/downloadlink.ts

@@ -12,6 +12,13 @@ class DownloadLinkOutputBinding extends OutputBinding {
     el.removeAttribute("aria-disabled");
     el.removeAttribute("tabindex");
   }
+  // Progress shouldn't be shown on the download button
+  // (progress will be shown as a page level pulse instead)
+  showProgress(el: HTMLElement, show: boolean): void {
+    return;
+    el;
+    show;
+  }
 }
 
 interface FileDownloadEvent extends JQuery.Event {

srcts/types/src/bindings/output/downloadlink.d.ts

@@ -2,5 +2,6 @@ import { OutputBinding } from "./outputBinding";
 declare class DownloadLinkOutputBinding extends OutputBinding {
     find(scope: HTMLElement): JQuery<HTMLElement>;
     renderValue(el: HTMLElement, data: string): void;
+    showProgress(el: HTMLElement, show: boolean): void;
 }
 export { DownloadLinkOutputBinding };

tests/testthat/_snaps/busy-indication.md

@@ -0,0 +1,52 @@
+# useBusyIndicators()
+
+    Code
+      tagList(useBusyIndicators(), useBusyIndicators(spinners = FALSE),
+      useBusyIndicators(pulse = FALSE), useBusyIndicators(spinners = FALSE, pulse = FALSE),
+      )
+    Output
+      <script>document.documentElement.dataset.shinyBusySpinners = 'true';
+      document.documentElement.dataset.shinyBusyPulse = 'true';</script>
+      <script>delete document.documentElement.dataset.shinyBusySpinners;
+      document.documentElement.dataset.shinyBusyPulse = 'true';</script>
+      <script>document.documentElement.dataset.shinyBusySpinners = 'true';
+      delete document.documentElement.dataset.shinyBusyPulse;</script>
+      <script>delete document.documentElement.dataset.shinyBusySpinners;
+      delete document.documentElement.dataset.shinyBusyPulse;</script>
+
+# busyIndicatorOptions()
+
+    Code
+      tagList(busy_indicator_options(), busy_indicator_options(spinner_type = "bars"),
+      busy_indicator_options(spinner_type = "pulse"), busy_indicator_options(
+        spinner_type = "dots"), busy_indicator_options(spinner_color = "red"),
+      busy_indicator_options(spinner_size = "10px"), busy_indicator_options(
+        spinner_delay = "1s"), busy_indicator_options(pulse_background = "blue"),
+      busy_indicator_options(pulse_height = "10px"), busy_indicator_options(
+        pulse_speed = "1s"), busy_indicator_options(spinner_color = "red",
+        spinner_size = "10px", spinner_delay = "1s", pulse_background = "blue",
+        pulse_height = "10px", pulse_speed = "1s"))
+    Output
+      <style id="spinner-options-606810">:has(> #spinner-options-606810) {--shiny-spinner-url:url('spinners/bars.svg');}</style>
+      <style id="spinner-options-606810">:has(> #spinner-options-606810) {--shiny-spinner-url:url('spinners/pulse.svg');}</style>
+      <style id="spinner-options-606810">:has(> #spinner-options-606810) {--shiny-spinner-url:url('spinners/dots.svg');}</style>
+      <style id="spinner-options-606810">:has(> #spinner-options-606810) {--shiny-spinner-color:#FF0000;}</style>
+      <style id="spinner-options-606810">:has(> #spinner-options-606810) {--shiny-spinner-size:10px;}</style>
+      <style id="spinner-options-606810">:has(> #spinner-options-606810) {--shiny-spinner-delay:1s;}</style>
+      <style>:root {--shiny-pulse-background:blue;}</style>
+      <style>:root {--shiny-pulse-height:10px;}</style>
+      <style>:root {--shiny-pulse-speed:1s;}</style>
+      <style id="spinner-options-606810">:has(> #spinner-options-606810) {--shiny-spinner-color:#FF0000;--shiny-spinner-size:10px;--shiny-spinner-delay:1s;}</style>
+      <style>:root {--shiny-pulse-background:blue;--shiny-pulse-height:10px;--shiny-pulse-speed:1s;}</style>
+
+# Can provide svg file for busyIndicatorOptions(spinner_type)
+
+    Code
+      busy_indicator_options(spinner_type = tmpsvg)
+    Output
+      [[1]]
+      <style id="spinner-options-606810">:has(> #spinner-options-606810) {--shiny-spinner-url:url('data:image/svg+xml;base64,PHN2Zz48L3N2Zz4K');}</style>
+      
+      attr(,"class")
+      [1] "card_item" "list"     
+

tests/testthat/test-busy-indication.R

@@ -0,0 +1,64 @@
+test_that("useBusyIndicators()", {
+  expect_snapshot(
+    tagList(
+      useBusyIndicators(),
+      useBusyIndicators(spinners = FALSE),
+      useBusyIndicators(pulse = FALSE),
+      useBusyIndicators(spinners = FALSE, pulse = FALSE),
+    )
+  )
+
+  expect_error(useBusyIndicators("foo"))
+  expect_error(useBusyIndicators(foo = "bar"))
+})
+
+busy_indicator_options <- function(...) {
+  withPrivateSeed(set.seed(100))
+  busyIndicatorOptions(...)
+}
+
+test_that("busyIndicatorOptions()", {
+
+  expect_snapshot(
+    tagList(
+      busy_indicator_options(),
+      busy_indicator_options(spinner_type = "bars"),
+      busy_indicator_options(spinner_type = "pulse"),
+      busy_indicator_options(spinner_type = "dots"),
+      busy_indicator_options(spinner_color = "red"),
+      busy_indicator_options(spinner_size = "10px"),
+      busy_indicator_options(spinner_delay = "1s"),
+      busy_indicator_options(pulse_background = "blue"),
+      busy_indicator_options(pulse_height = "10px"),
+      busy_indicator_options(pulse_speed = "1s"),
+      busy_indicator_options(
+        spinner_color = "red",
+        spinner_size = "10px",
+        spinner_delay = "1s",
+        pulse_background = "blue",
+        pulse_height = "10px",
+        pulse_speed = "1s"
+      )
+    )
+  )
+
+  expect_error(busy_indicator_options("foo"))
+  expect_error(busy_indicator_options(foo = "bar"))
+  expect_error(busy_indicator_options(spinner_type = "dsflds"))
+  expect_error(busy_indicator_options(spinner_color = "dsflds"))
+  expect_error(busy_indicator_options(spinner_size = "dsflds"))
+  expect_error(busy_indicator_options(pulse_height = "dsflds"))
+})
+
+
+test_that("Can provide svg file for busyIndicatorOptions(spinner_type)", {
+  skip_if(.Platform$OS.type == "windows")
+
+  tmpsvg <- tempfile(fileext = ".svg")
+  writeLines("<svg></svg>", tmpsvg)
+  on.exit(unlink(tmpsvg))
+
+  expect_snapshot(
+    busy_indicator_options(spinner_type = tmpsvg)
+  )
+})

tools/documentation/pkgdown.yml

@@ -14,6 +14,7 @@ reference:
     contents:
       - absolutePanel
       - bootstrapPage
+      - busyIndicatorOptions
       - column
       - conditionalPanel
       - fillPage
@@ -31,6 +32,7 @@ reference:
       - inputPanel
       - flowLayout
       - splitLayout
+      - useBusyIndicators
       - verticalLayout
       - wellPanel
       - withMathJax

tools/updateSpinnerTypes.R

@@ -0,0 +1,53 @@
+# Downloads a subset of spinner types from https://github.com/n3r4zzurr0/svg-spinners
+library(rprojroot)
+
+url_root <- "https://raw.githubusercontent.com/n3r4zzurr0/svg-spinners/main/"
+pkg_root <- find_package_root_file()
+dest_dir <- file.path(pkg_root, "inst/www/shared/busy-indicators/spinners")
+
+unlink(dest_dir, recursive = TRUE)
+dir.create(dest_dir)
+
+# Choose a subset of spinner types
+# The key is the "original" name, the value is the new name
+spinner_types <- list(
+  "ring-resize.svg" = "ring.svg",
+  "90-ring-with-bg.svg" = "ring2.svg",
+  "180-ring.svg" = "ring3.svg",
+  "bars-scale-fade.svg" = "bars.svg",
+  "bars-scale.svg" = "bars2.svg",
+  "bars-rotate-fade.svg" = "bars3.svg",
+  "pulse-2.svg" = "pulse.svg",
+  "pulse-rings-2.svg" = "pulse2.svg",
+  "pulse-rings-multiple.svg" = "pulse3.svg",
+  "3-dots-scale.svg" = "dots.svg",
+  "6-dots-rotate.svg" = "dots2.svg",
+  "6-dots-scale.svg" = "dots3.svg"
+)
+
+# Download and remove width/height attributes
+lapply(names(spinner_types), function(x) {
+  dest_file <- file.path(dest_dir, spinner_types[[x]])
+  download.file(file.path(url_root, "svg-css", x), dest_file)
+  svg <- readLines(dest_file, warn = FALSE)
+  svg <- sub('width="\\d+" height="\\d+" ', "", svg)
+  writeLines(svg, dest_file)
+})
+
+download.file(
+  "https://raw.githubusercontent.com/n3r4zzurr0/svg-spinners/main/LICENSE",
+  file.path(dest_dir, "LICENSE")
+)
+
+
+types <- sub("\\.svg$", "", as.character(spinner_types))
+
+
+writeLines(
+  c(
+    "# Generated by tools/updateSpinnerTypes.R: do not edit by hand",
+    ".busySpinnerTypes <-",
+    paste(" ", deparse(types))
+  ),
+  here::here("R/busy-indicators-spinners.R")
+)