Leaflet map breaks out of 'viewport' when using shinybusy

[graemediack]

I've noticed that when using shinybusy add_loading_state with a leaflet map it causes it to display map outside of the 'normal' leaflet viewport (apologies, I don't know the correct terminology there) See below app.R for simple error reproduction. Thanks!

library(shiny)
library(leaflet)
library(shinybusy)

ui <- fluidPage(

    titlePanel("Shiny Busy Behaviour with Leaflet"),

    mainPanel(
        add_loading_state(
            "#map",
            spinner = "arrows",
            timeout = 1500,
            text = "Please wait...",
            svgColor = "steelblue"
        ),
       leafletOutput("map")
    )
)

server <- function(input, output) {

    output$map <- renderLeaflet({ 
        leaflet () %>%
        addProviderTiles(providers$Stamen.Toner, group = "Dark") %>%
        addProviderTiles(providers$Stamen.TonerLite, group = "Light") %>%
        addLayersControl(baseGroups = c("Dark", "Light"),options = layersControlOptions(collapsed = FALSE))
    })
}

shinyApp(ui = ui, server = server)

[pvictor]

Hello,

Thanks, indeed it makes something strange, I don't have a solution yet, I will investigate.

Victor

[graemediack]

Thanks Victor!
I forgot to mention version detail:
R 4.0.0
shiny 1.6.0
leaflet 2.0.4.1
shinybusy 0.2.2

[etiennebacher]

Hello @graemediack, I noticed that, for some reason, using add_loading_state() removes position: relative in the CSS of the leaflet map. Therefore, one solution is to manually add this in the CSS of the app, like below:

library(shiny)
library(leaflet)
library(shinybusy)

ui <- fluidPage(
  tags$head(
    tags$style(
      HTML("#map { 
           position: relative
           }")
    )
  ),
  
  titlePanel("Shiny Busy Behaviour with Leaflet"),
  
  mainPanel(
    add_loading_state(
      "#map",
      spinner = "arrows",
      timeout = 1500,
      text = "Please wait...",
      svgColor = "steelblue"
    ),
    leafletOutput("map")
  )
)

server <- function(input, output) {
  
  output$map <- renderLeaflet({ 
    leaflet () %>%
      addProviderTiles(providers$Stamen.Toner, group = "Dark") %>%
      addProviderTiles(providers$Stamen.TonerLite, group = "Light") %>%
      addLayersControl(baseGroups = c("Dark", "Light"),options = layersControlOptions(collapsed = FALSE))
  })
}

shinyApp(ui = ui, server = server)

I don't know why this CSS rule disappears when using add_loading_state but at least it's a workaround.

[graemediack]

Thanks @etiennebacher, good find!