add 'width' param for edge cases where spinner has no width; fixes #85

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.9000
+Version: 1.1.0.9001
 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,3 +1,7 @@
+# Unreleased version
+
+- 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)
 
 - Add `showSpinner()` and `hideSpinner()` that allow you to manually trigger the spinner (#56)

R/buildSpinner.R

@@ -12,7 +12,8 @@ buildSpinner <- function(
     image.width,
     image.height,
     hide.ui,
-    caption
+    caption,
+    width = NULL
 ) {
   spinner_type <- match.arg(spinner_type)
   output_spinner <- (spinner_type == "output")
@@ -35,7 +36,8 @@ buildSpinner <- function(
     id <- paste0("spinner-", digest::digest(ui_element))
   }
 
-  css_rules_tag <- get_spinner_css_tag(type, color, size, color.background, custom.css, id, image, caption, output_spinner)
+  css_rules_tag <- get_spinner_css_tag(type, color, size, color.background, custom.css, id,
+                                       image, caption, width, output_spinner)
 
   if (!is.null(caption)) {
     caption <- shiny::div(

R/utils.R

@@ -65,7 +65,7 @@ get_proxy_element <- function(ui_element, proxy.height, hide.ui) {
   }
 }
 
-get_spinner_css_tag <- function(type, color, size, color.background, custom.css, id, image, caption, output_spinner) {
+get_spinner_css_tag <- function(type, color, size, color.background, custom.css, id, image, caption, width, output_spinner) {
   base_css <- ""
   add_default_style <- (is.null(image) && !custom.css && type != 0)
   if (add_default_style) {
@@ -92,12 +92,17 @@ get_spinner_css_tag <- function(type, color, size, color.background, custom.css,
     base_css <- paste(base_css, glue::glue("#{id}__caption {{ color: {color}; font-size: {size + 0.5}em; }}"))
   }
 
+  if (!is.null(width)) {
+    base_css <- paste(base_css, glue::glue('[data-spinner-id="{id}"] {{ min-width: {width}px; }}'))
+  }
+
   css_rules_tag <- NULL
   if (nzchar(base_css)) {
     css_rules_tag <- insertHead(shiny::tags$style(
       class = if (!output_spinner) "global-spinner-css",
       shiny::HTML(base_css)
     ))
   }
+
   css_rules_tag
 }

R/withSpinner.R

@@ -18,7 +18,7 @@
 #' Ignored if `image` is used.
 #' @param custom.css Set to `TRUE` if you have your own custom CSS that you defined and you don't want the automatic CSS applied to the spinner.
 #' Ignored if `image` is used.
-#' @param proxy.height If the output UI doesn't specify the output height, you can set a proxy height. It defaults to "400px"
+#' @param proxy.height If the output UI doesn't specify the output height, you can set a proxy height. For example, `textOutput()` usually needs this parameter. It defaults to "400px"
 #' for outputs with undefined height. Ignored if `hide.ui` is set to `FALSE`.
 #' @param id The HTML ID to use for the spinner. If you don't provide one, it will be generated automatically.
 #' @param image The path or URL of the image to use if you want to use a custom image instead of a built-in spinner.
@@ -31,6 +31,9 @@
 #' 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 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.
 #' @seealso [showSpinner()], [hideSpinner()], [showPageSpinner()]
 #' @examples
 #' if (interactive()) {
@@ -64,7 +67,8 @@ withSpinner <- function(
   image.width = getOption("spinner.image.width"),
   image.height = getOption("spinner.image.height"),
   hide.ui = getOption("spinner.hide.ui", default = TRUE),
-  caption = getOption("spinner.caption")
+  caption = getOption("spinner.caption"),
+  width = getOption("spinner.width")
 ) {
 
   if (!inherits(ui_element, "shiny.tag") && !inherits(ui_element, "shiny.tag.list")) {
@@ -85,7 +89,8 @@ withSpinner <- function(
     image.width = image.width,
     image.height = image.height,
     hide.ui = hide.ui,
-    caption = caption
+    caption = caption,
+    width = width
   )
 
   htmltools::attachDependencies(spinner, getDependencies())

inst/assets/spinner.js

@@ -8,6 +8,8 @@ function escapeSelector(s) {
 function show_spinner(id) {
     var selector = "#" + escapeSelector(id);
     var parent = $(selector).closest(".shiny-spinner-output-container");
+    if (parent.length == 0) return;
+
     $(selector).siblings(".load-container, .shiny-spinner-placeholder").removeClass('shiny-spinner-hidden');
 
     if (parent.hasClass("shiny-spinner-hideui")) {
@@ -69,7 +71,7 @@ Shiny.addCustomMessageHandler('shinycssloaders.show_spinner', function(params) {
 });
 
 /* When new value or error comes in, hide spinner container (if any) & show the output */
-$(document).on('shiny:value shiny:error', function(event) {
+$(document).on('shiny:value shiny: error', function(event) {
   var id = event.target.id;
   if (id === undefined) {
     return;