Waiter for R shiny not showing properly when using it on renders of different tabPanel

Question

I have an issue with the waiter which I need for an app built with R shiny.

The example below (based on the fantastic website on the waiter package by John Coene: https://waiter.john-coene.com/#/waiter/examples#on-render) helps me illustrate my issue.

The app is made of two tabPanels, the first one which shows a table, and the second one that shows a chart. The table and the chart will appear after some waiting time, and the waiter spinner should, in the meantime, appear in the middle of the rendering areas of both tabPanels.

However, what actually happen is that the waiter spinner only shows up in the middle of the rendering area of the tabPanel I open first, whereas in the other tabPanel it is stuck in the top-left corner of the page.

Many thanks in advance for whoever can help me fix this problem!

library(shiny)
library(highcharter)
library(shinythemes)
library(waiter)

ui <- fluidPage(
  theme = shinytheme("cyborg"),

  useWaiter(),

  actionButton("draw", "render stuff"),

  fluidPage(
    tabsetPanel(
      tabPanel("Table", tableOutput("table")),
      tabPanel("Chart", highchartOutput("hc"))
    )
  )
)

server <- function(input, output){
  
  # specify the id 
  w <- Waiter$new(id = c("hc", "table"))
  
  dataset <- reactive({
    input$draw
    
    w$show()
    
    Sys.sleep(8)
    
    head(cars)
  })
  
  output$table <- renderTable(dataset())

  output$hc <- renderHighchart({
    hchart(dataset(), "scatter", hcaes(speed, dist))
  })
  
}

shinyApp(ui, server)

Answer 1

I would recommend you use shinycssloaders instead. The reason is that loaders' positions in waiter are calculated by current visible height and width. However, there is no visible position in the second tab or the hidden tabs, so waiter can't add the loader to the right spot. There is no fix we can do here. This is a feature that waiter doesn't support currently.

library(shiny)
library(highcharter)
library(shinythemes)
library(shinycssloaders)

ui <- fluidPage(
    theme = shinytheme("cyborg"),
    actionButton("draw", "render stuff"),
    fluidPage(
        tabsetPanel(
            tabPanel("Table", withSpinner(tableOutput("table"), type = 3, color.background = "#060606", color = "#EEEEEE")),
            tabPanel("Chart", withSpinner(highchartOutput("hc"), type = 3, color.background = "#060606", color = "#EEEEEE"))
        )
    )
)
server <- function(input, output){
    dataset <- reactive({
        input$draw
        Sys.sleep(4)
        head(cars)
    })
    output$table <- renderTable(dataset())
    output$hc <- renderHighchart({
        hchart(dataset(), "scatter", hcaes(speed, dist))
    })
}
shinyApp(ui, server)