Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Left Margin Issue with shinybusy::add_busy_bar() Display #34

Open
danielvartan opened this issue Jan 2, 2025 · 3 comments
Open

Left Margin Issue with shinybusy::add_busy_bar() Display #34

danielvartan opened this issue Jan 2, 2025 · 3 comments

Comments

@danielvartan
Copy link

danielvartan commented Jan 2, 2025 •
edited
Loading

Hi there, 👋

Thank you for creating such a great package!

I’ve encountered an issue with the shinybusy::add_busy_bar() function. While it works as expected in most cases, I noticed an unintended behavior: the bar has a margin on the left side that doesn’t appear to be a design choice.

Here’s a screenshot for reference:

image

You can reproduce this issue using the following repository and Shiny app:

Repository: https://github.com/danielvartan/cran-logs
Shiny App: https://danielvartan.shinyapps.io/cran-logs/?package=shinybusy

Below are my system details for your reference.

I hope this information helps in diagnosing the issue. Please let me know if you need any additional details.

Best regards!

RStudio Edition : Desktop
RStudio Version : 2024.12.0 Build 467
OS Version : Ubuntu 24.04.1 LTS
R Version : 4.4.2

sessionInfo()
#> R version 4.4.2 (2024-10-31)
#> Platform: x86_64-pc-linux-gnu
#> Running under: Ubuntu 24.04.1 LTS
#> 
#> Matrix products: default
#> BLAS:   /usr/lib/x86_64-linux-gnu/blas/libblas.so.3.12.0 
#> LAPACK: /usr/lib/x86_64-linux-gnu/lapack/liblapack.so.3.12.0
#> 
#> locale:
#>  [1] LC_CTYPE=pt_BR.UTF-8       LC_NUMERIC=C              
#>  [3] LC_TIME=pt_BR.UTF-8        LC_COLLATE=en_US.UTF-8    
#>  [5] LC_MONETARY=pt_BR.UTF-8    LC_MESSAGES=en_US.UTF-8   
#>  [7] LC_PAPER=pt_BR.UTF-8       LC_NAME=C                 
#>  [9] LC_ADDRESS=C               LC_TELEPHONE=C            
#> [11] LC_MEASUREMENT=pt_BR.UTF-8 LC_IDENTIFICATION=C       
#> 
#> time zone: America/Sao_Paulo
#> tzcode source: system (glibc)
#> 
#> attached base packages:
#> [1] stats     graphics  grDevices utils     datasets  methods   base     
#> 
#> loaded via a namespace (and not attached):
#>  [1] digest_0.6.37     fastmap_1.2.0     xfun_0.49         glue_1.8.0       
#>  [5] knitr_1.49        htmltools_0.5.8.1 rmarkdown_2.29    lifecycle_1.0.4  
#>  [9] cli_3.6.3         reprex_2.1.1      withr_3.0.2       compiler_4.4.2   
#> [13] rstudioapi_0.17.1 tools_4.4.2       evaluate_1.0.1    yaml_2.3.10      
#> [17] rlang_1.1.4       fs_1.6.5

Created on 2025-01-02 with reprex v2.1.1
@pvictor
Copy link
Member

pvictor commented Jan 10, 2025

Hello,

Thanks for reporting the issue and for the information about your app and session.
I think it's due to a padding added to the body by bslib::page_fillable. If you remove this padding, it work as expected :

library(shiny)
library(shinybusy)

ui <- bslib::page_fillable(
  padding = 0,
  # Use this function somewhere in UI
  add_busy_bar(color = "#FF0000"),
  
  headerPanel('Iris k-means clustering'),
  
  tags$br(),
  actionButton("quick", "Quick calculation (nothing happens)"),
  actionButton("sleep", "Long calculation (progress bar on top)")
)

server <- function(input, output, session) {
  
  observeEvent(input$quick, {
    Sys.sleep(0.1)
  })
  
  observeEvent(input$sleep, {
    Sys.sleep(5)
  })
  
}

shinyApp(ui, server)

But obviously you lose padding and you will have to manually add an inner container to get padding back...
I will search for another solution.

Victor

@pvictor
Copy link
Member

pvictor commented Jan 10, 2025

Also note, that in recent version of Shiny, there's a similar functionnality :

library(bslib)
library(shiny)

ui <- page_fillable(
  useBusyIndicators(spinners = FALSE, pulse = TRUE),
  busyIndicatorOptions(pulse_height = "20px"),
  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)

@danielvartan
Copy link
Author

Hi,

Thank you for pointing that out! Removing the padding in bslib::page_fillable() indeed works, but, as you mentioned, it also removes an essential part of the UI, which isn't ideal.

I wasn't aware of shiny::useBusyIndicators() — it's interesting how it operates at a higher level by modifying the <html> parameters. I'll adopt this solution for now.

I appreciate your feedback and insights. :)

Screencast.from.2025-01-10.17-38-55.webm

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
2 participants
@pvictor @danielvartan