Spinners, Pivot, Stack: No example of real-world use and difficulties to use!

[dionnecargy]

Hi!

I am loving the shiny.fluent R package and am using it as my framework in developing an R shiny app.

However the documentation of how to use these code in R with real-world use-case examples is very limited, scarce or not even displayed anywhere. While I have been able to piece together as much as I can, there are some things which the shiny.fluent framework has made much more difficult than if I had kept the normal shiny template.

One major example of this is generating a spinner to show users of the app that the data is being processed.

The shinycssloaders has a fantastic spinner code that loads a spinner automatically while the output is rendering which I have added to a shiny fluent UI framework below.
`library(shiny)
library(shiny.fluent)
library(shinycssloaders)
library(shiny)

ui <- fluentPage(
Text(variant = "medium", "A demo example of adding an animated CSS spinner/loader while r plot is loading."),
withSpinner(plotlyOutput("plot1"), type = 8) # add spinner
)

server <- function(input, output, session){
output$plot1 <- renderPlotly({
Sys.sleep(5) # Adding intentional delay in execution of plot to demo loading spinner
plot_ly(
data = mtcars,
x = ~wt,
y = ~mpg,
type = "scatter",
mode = "markers",
color = ~as.factor(cyl),
colors = "Set1"
)
})
}

shinyApp(ui, server)
`

This code WORKS but when the spinner command within a stack() , pivot(pivotItem()) it does NOT work.

The Spinner() code within the shiny.fluent package is my ideal spinner to use however I cannot make it conditionally render - i.e., only render when the output is being processed then go away when the output has been successfully completed and rendered.

Can you help me with one or both of the following:

1. Provide a reproducible example of how the shiny.fluent::Spinner() can be used to only occur when the output is being processed and then disappear
2. AND/OR Allow for the shinycssloaders::withSpinner to be used within shiny.fluent::Stack(), shiny.fluent::Pivot() and shiny.fluent::PivotItem().

One last thing: I have tried to create a work around with the following code but I cannot understand how to identify the input for the shiny.fluent::Pivot():

library(shiny)
library(plotly)
library(shiny.fluent)
library(shinycssloaders)

tab1 <- function(){
  withSpinner(plotlyOutput("plot1"), type = 8)
}

tab2 <- function(){
  withSpinner(plotlyOutput("plot2"), type = 8)
}

# Define UI
ui <- fluentPage(
  Pivot(
    itemKey = "pivot",  #???????????
    initialSelectedKey = "tab1", #???????????
    PivotItem(headerText = "Tab 1", itemKey = "tab1"),  # Key for Tab 1 ???????????
    PivotItem(headerText = "Tab 2", itemKey = "tab2")   # Key for Tab 2 ???????????
  ),
  uiOutput("conditionalPlot")  # Placeholder for dynamic content
)

# Define Server
server <- function(input, output, session) {
  output$conditionalPlot <- renderUI({
    selected_tab <- input$pivot  # Get the selected tab key ???????????
    
    if (selected_tab == "tab1") {
      tab1()
    } else if (selected_tab == "tab2") {
      tab2()
    }
  })
}


# Run the app
shinyApp(ui, server)

Thank you so so so so much for your help.

[dionnecargy]

To clarify, I have used the following documentations: https://appsilon.github.io/shiny.fluent/reference/index.html, https://developer.microsoft.com/en-us/fluentui#/controls/web/, https://www.youtube.com/watch?v=KKWAeeZM4Rc&ab_channel=Appsilon, etc.