running into JS issues when using waiter with bslib packakge

[gadepallivs]

I'm trying to place waiter on page load. Not sure how to use this. My shiny app is structured with page_navbar, and bslib::nav_panel. If I use waiter within those, I get a warning as below and waiter does not display

Warning message:
Navigation containers expect a collection of `bslib::nav_panel()`/`shiny::tabPanel()`s and/or `bslib::nav_menu()`/`shiny::navbarMenu()`s. Consider using `header` or `footer` if you wish to place content above (or below) every panel's contents. 

if I wrap the waiter under page_fluid and all page nav bar under this, the waiter works and the page_navbar displays properly. However, the popver does not work when I click on the gear icon. if I remove the waiter code, everything just works fine.

Am I calling the waiter in the wrong way ?

library(shiny)
library(bslib)
#> 
#> Attaching package: 'bslib'
#> The following object is masked from 'package:utils':
#> 
#>     page
library(waiter)


ui <- bslib::page_fluid(
  useWaiter(),
  useHostess(),
  waiterShowOnLoad(
    color = "#f7fff7",
    hostess_loader(
      "loader",
      preset = "circle",
      text_color = "black",
      class = "label-center",
      center_page = TRUE
    )
  ),
  page_navbar(
    title = "My App",
    bslib::nav_panel(
      title = "One",
      card(
        class = "mt-5",
        card_header(popover(
          bsicons::bs_icon("gear", title = "Settings"),
          title = "Settings",
          sliderInput("n", "Number of points", 1, 100, 50)
        )),
        "The card body..."
      )
    )
  )
)

server <- function(input, output) {
  hostess <- Hostess$new("loader")

  for (i in 1:10) {
    Sys.sleep(runif(1) / 2)
    hostess$set(i * 10)
  }

  waiter_hide()
}

shinyApp(ui, server)

Shiny applications not supported in static R Markdown documents

^{Created on 2024-03-23 with reprex v2.1.0}

[JohnCoene]

Apologies, I only just saw that.

The issue is how you use bslib, call either page_fluid or page_navbar, not both.

In page_navbar dependencies are passed to the header argument.

bslib::page_navbar("title", header = list(useWaiter()))

[gadepallivs]

@JohnCoene Tried removing the page_fluid and still get the same issue. The popover does not open

library(shiny)
library(bslib)
#> 
#> Attaching package: 'bslib'
#> The following object is masked from 'package:utils':
#> 
#>     page
library(waiter)


ui <- bslib::page_navbar(
  title = "My App",
  header = list(
    waiter::useWaiter(),
    waiter::useHostess(),
    waiter::waiterShowOnLoad(
      color = "#f7fff7",
      waiter::hostess_loader(
        "loader",
        preset = "circle",
        text_color = "black",
        class = "label-center",
        center_page = TRUE
      )
    )
  ),
  bslib::nav_panel(
    title = "One",
    bslib::card(
      class = "mt-5",
      bslib::card_header(
        bslib::popover(
          bsicons::bs_icon("gear", title = "Settings"),
          title = "Settings",
          shiny::sliderInput("n", "Number of points", 1, 100, 50)
        )
      ),
      "The card body..."
    )
  )
)


server <- function(input, output) {
  hostess <- Hostess$new("loader")

  for (i in 1:10) {
    Sys.sleep(runif(1) / 2)
    hostess$set(i * 10)
  }

  waiter::waiter_hide()
}

shiny::shinyApp(ui, server)

Shiny applications not supported in static R Markdown documents

^{Created on 2024-04-05 with reprex v2.1.0}

[JohnCoene]

Sorry, this is not to do with waiter.

Look at the example of card header with tooltip here, it's not like you have it.

[fricour]

Hi,

I've bumped into the same issue but I am not able to understand how it was solved.

I am using a modular approach to build a shiny app and it's also using a bit of waiter and bslib though the documentation on the tooltip/popover from bslib did not clarify how to fix this issue.

Here is a reprex

library(shiny)
library(waiter)
library(bslib)
library(palmerpenguins)
library(ggplot2)
library(bsicons)

mod_ui <- function(id) {
  ns <- NS(id)
  
  foot <- popover(
    actionLink("link", "Card footer"),
    "Here's a ",
    a("hyperlink", href = "https://google.com")
  )
  
  tagList(
    useWaiter(),
    useHostess(), # include dependencies
    page_fillable(
      card(
        card_header(
          "Penguin body mass",
          popover(
            bs_icon("gear", class = "ms-auto"),
            selectInput(ns("yvar"), "Split by", c("sex", "species", "island")),
            selectInput(ns("color"), "Color by", c("species", "island", "sex"), "island"),
            title = "Plot settings"
          ),
          class = "d-flex align-items-center gap-1"
        ),
        actionButton(ns("btn"), "render"),
        plotOutput(ns("plt")),
        card_footer(foot)
      )
    )
  )
}

mod_server <- function(id){
  moduleServer(id, function(input, output, session) {
    ns <- session$ns
    
    host <- Hostess$new(infinite = TRUE)
    w <- waiter::Waiter$new(ns("plt"),
                            color = "white",
                            html = host$get_loader(
                              preset = "circle",
                              text_color = "black",
                              class = "label-center",
                              center_page = FALSE
                            ))
    
    data <- eventReactive(input$btn, {
      
      # start waiter
      w$show()
      host$start()
      
      for(i in 1:10){
        Sys.sleep(.3)
      }
      
      # stop waiter
      host$close()
      
      return(palmerpenguins::penguins)
      
    })
    
    output$plt <- renderPlot({
      ggplot(data(), aes(x = body_mass_g, y = !!sym(input$yvar), fill = !!sym(input$color))) +
        ggridges::geom_density_ridges(scale = 0.9, alpha = 0.5) +
        coord_cartesian(clip = "off") +
        labs(x = NULL, y = NULL) +
        theme_minimal(base_size = 20) +
        theme(legend.position = "top")
      
    })
    
  })
  
}

# App #
ui <- fluidPage(
  mod_ui("test_ui")
)

server <- function(input, output, session) {
  mod_server("test_ui")
}

shinyApp(ui = ui, server = server)

Basically, before having waiter do the job (i.e. after clicking the button), all is fine. The popover is working and the card footer as well.

If I don't close the popover and click the button to create the plot, the popover still works. However, if I close it and click the button both the footer and popover do not work anymore.

Would it be possible to clarify how does it not relate to the waiter package? Any idea for a fix?

Thanks a lot !

[JohnCoene]

This is a different issue it seems. I'm not sure why it comes loading-bar which is a dependency of the hostess, removing the hostess (can keep waiter) "solves" the issue.

Sorry about that.