Showing spinner in a setTimeout function to avoid blinking spinners

NEWS.md

@@ -1,6 +1,7 @@
 # Unreleased version
 
 - Fix page sometimes wobbling because of hidden spinner (#54)
+- Add support to delay display
 
 # shinycssloaders 1.0.0 (2020-07-28)
 
@@ -41,4 +42,4 @@
 
 # shinycssloaders 0.1.0
 
-The first working version of the package. 
+The first working version of the package. 

R/withSpinner.R

@@ -46,7 +46,8 @@ withSpinner <- function(
   proxy.height = NULL,
   id = NULL,
   image = NULL, image.width = NULL, image.height = NULL,
-  hide.ui = TRUE
+  hide.ui = TRUE,
+  show.delay = 0
 ) {
   stopifnot(type %in% 0:8)
 
@@ -114,6 +115,9 @@ withSpinner <- function(
         if (hide.ui) "shiny-spinner-hideui" else "",
         if (is.null(image)) "" else "shiny-spinner-custom"
       ),
+      `data-showdelay` = paste(
+        if (is.numeric(show.delay)) show.delay else "0"
+      ),
       shiny::div(
         class = paste(
           "load-container",

inst/assets/spinner.js

@@ -1,5 +1,6 @@
 (function() {
 var output_states = {};
+var timeout_handles = {};
 
 function escapeSelector(s) {
     return s.replace(/([!"#$%&'()*+,-./:;<=>?@\[\\\]^`{|}~])/g, "\\$1");
@@ -8,18 +9,33 @@ function escapeSelector(s) {
 function show_spinner(id) {
     var selector = "#" + escapeSelector(id);
     var 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');      
+    if (parent && parent.length && (timeout_handles[parent] === null || timeout_handles[parent] === undefined)) {
+        var delay = parent.data() && parent.data().showdelay ? parent.data().showdelay : 0;
+        timeout_handles[parent] = setTimeout(function(){
+          timeout_handles[parent] = null;
+
+          $(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');      
+          }
+
+        }, delay);
     }
 }
 
 function hide_spinner(id) {
     var selector = "#" + escapeSelector(id);
     var parent = $(selector).closest(".shiny-spinner-output-container");
+
+    if (parent && parent.length &&  timeout_handles[parent] !== null) {
+      clearTimeout(timeout_handles[parent]);
+      timeout_handles[parent] = null;
+    }
+
     $(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

@@ -18,6 +18,7 @@ server <- function(input, output, session) {
         color.background = "#fafafa"
       )
     }
+    params$show.delay <- input$delay
     do.call(shinycssloaders::withSpinner, params)
   })
 
@@ -36,4 +37,5 @@ server <- function(input, output, session) {
       bg <- par(bg = bg)
     })
   })
+
 }

inst/examples/demo/ui.R

@@ -81,7 +81,8 @@ fluidPage(
         sliderInput("size", "Size", min = 0.5, max = 5, step = 0.5, value = 1)
       ),
       numericInput("time", "Seconds to show spinner", 1.5),
-      actionButton("update", "Update", class = "btn-primary btn-lg"),
+      numericInput("delay", "Delay before showing spinner (milliseconds)", 0),
+      actionButton("update", "Update", class = "btn-primary btn-lg")
     ),
     column(
       6,