add delay argument; fixes #95

Author: daattali

DESCRIPTION

@@ -1,6 +1,6 @@
 Package: shinycssloaders
 Title: Add Loading Animations to a 'shiny' Output While It's Recalculating
-Version: 1.1.0.9001
+Version: 1.1.0.9002
 Authors@R: c(
     person("Dean","Attali",email="[email protected]",role=c("aut","cre"),
         comment = c("Maintainer/developer of shinycssloaders since 2019", ORCID="0000-0002-5645-3493")),

NEWS.md

@@ -1,5 +1,6 @@
 # Unreleased version
 
+- Add `delay` argument to show the spinner after a short delay (#95)
 - Add `width` argument that can be used in rare cases where the spinner has no inherent width (#85)
 
 # shinycssloaders 1.1.0 (2024-07-30)

R/buildSpinner.R

@@ -13,7 +13,8 @@ buildSpinner <- function(
     image.height,
     hide.ui,
     caption,
-    width = NULL
+    delay,
+    width
 ) {
   spinner_type <- match.arg(spinner_type)
   output_spinner <- (spinner_type == "output")
@@ -77,6 +78,7 @@ buildSpinner <- function(
   shiny::div(
     css_rules_tag,
     `data-spinner-id` = id,
+    `data-spinner-delay` = if (delay == 0) NULL else delay,
     class = parent_cls,
     shiny::div(
       class = child_cls,

R/pageSpinner.R

@@ -96,7 +96,9 @@ showPageSpinner <- function(
     caption = caption,
     ui_element = NULL,
     proxy.height = NULL,
-    hide.ui = FALSE
+    hide.ui = FALSE,
+    delay = 0,
+    width = NULL
   )
 
   hidePageSpinner()

R/withSpinner.R

@@ -31,6 +31,7 @@
 #' Setting `hide.ui = FALSE` will result in the spinner showing up on top of the previous output UI.
 #' @param caption Caption to display below the spinner or image (text or HTML). The caption's font color is determined
 #' by the `color` parameter. Ignored if `type` is 1.
+#' @param delay Specify a delay (in milliseconds) before the spinner is displayed. This can be useful to avoid showing the spinner for very short loading times, for a better user experience.
 #' @param width The width of the spinner, in pixels. This is only needed in rare cases when the spinner
 #' is not appearing on the screen due to it having no inherent width (for example, when the output is inside
 #' a CSS flexbox without a specified width). Do not use this parameter if the spinner already works.
@@ -68,6 +69,7 @@ withSpinner <- function(
   image.height = getOption("spinner.image.height"),
   hide.ui = getOption("spinner.hide.ui", default = TRUE),
   caption = getOption("spinner.caption"),
+  delay = getOption("spinner.delay", default = 0),
   width = getOption("spinner.width")
 ) {
 
@@ -90,6 +92,7 @@ withSpinner <- function(
     image.height = image.height,
     hide.ui = hide.ui,
     caption = caption,
+    delay = delay,
     width = width
   )
 

inst/assets/spinner.js

@@ -1,5 +1,6 @@
 (function() {
 var output_states = {};
+let timeout_ids = {};
 
 function escapeSelector(s) {
     return s.replace(/([!"#$%&'()*+,-./:;<=>?@\[\\\]^`{|}~])/g, "\\$1");
@@ -10,18 +11,37 @@ function show_spinner(id) {
     var parent = $(selector).closest(".shiny-spinner-output-container");
     if (parent.length == 0) return;
 
+    if (parent.data() && parent.data().spinnerDelay && parent.data().spinnerDelay > 0) {
+      let tid = setTimeout(() => {
+        show_spinner_logic(selector);
+      }, parent.data().spinnerDelay);
+      timeout_ids[selector] = tid;
+    } else {
+      show_spinner_logic(selector);
+    }
+}
+
+let show_spinner_logic = function(selector) {
+    delete timeout_ids[selector];
+    let parent = $(selector).closest(".shiny-spinner-output-container");
+
     $(selector).siblings(".load-container, .shiny-spinner-placeholder").removeClass('shiny-spinner-hidden');
 
     if (parent.hasClass("shiny-spinner-hideui")) {
-      $(selector).siblings(".load-container").siblings('.shiny-bound-output, .shiny-output-error').css('visibility', 'hidden');
-      // if there is a proxy div, hide the previous output
-      $(selector).siblings(".shiny-spinner-placeholder").siblings('.shiny-bound-output, .shiny-output-error').addClass('shiny-spinner-hidden');
+        $(selector).siblings(".load-container").siblings('.shiny-bound-output, .shiny-output-error').css('visibility', 'hidden');
+        // if there is a proxy div, hide the previous output
+        $(selector).siblings(".shiny-spinner-placeholder").siblings('.shiny-bound-output, .shiny-output-error').addClass('shiny-spinner-hidden');
     }
-}
+};
 
 function hide_spinner(id) {
     var selector = "#" + escapeSelector(id);
+    if (selector in timeout_ids) {
+      clearTimeout(timeout_ids[selector]);
+      delete timeout_ids[selector];
+    }
     var parent = $(selector).closest(".shiny-spinner-output-container");
+
     $(selector).siblings(".load-container, .shiny-spinner-placeholder").addClass('shiny-spinner-hidden');
     if (parent.hasClass("shiny-spinner-hideui")) {
       $(selector).siblings(".load-container").siblings('.shiny-bound-output').css('visibility', 'visible');

inst/examples/demo/server.R

@@ -22,6 +22,7 @@ server <- function(input, output, session) {
     if (nzchar(input$caption)) {
       params$caption <- input$caption
     }
+    params$delay <- input$delay * 1000
 
     params
   })
@@ -46,6 +47,7 @@ server <- function(input, output, session) {
     params <- spinner_params()
     params$ui_element <- NULL
     params$background <- input$bg
+    params$delay <- NULL
     suppressWarnings(do.call(shinycssloaders::showPageSpinner, params))
     Sys.sleep(input$time)
     shinycssloaders::hidePageSpinner()

inst/examples/demo/ui.R

@@ -88,6 +88,10 @@ fluidPage(
       ),
       textInput("caption", "Caption", ""),
       sliderInput("time", "Seconds to show spinner", 0, 3, 1, 0.5),
+      conditionalPanel(
+        "input.spinner_type == 'output'",
+        sliderInput("delay", "Delay (seconds)", 0, 3, 0, 0.25),
+      ),
       conditionalPanel(
         "input.spinner_type == 'output'",
         actionButton("update", "Update Plot", class = "btn-primary btn-lg")