progress inside a modal windows

[ArthurPERE]

Hello,

I search for a progress bar inside a modal window, to use it like progressSweetAlert of shinyWidget package. But I can't do it like I want it.

Something like this :

library(shiny)
library(shiny.semantic)

ui <- semanticPage(
  segment(
    class = "basic",
    button("btn_modal", "show modal"),
    modal( id = "modal_progress", footer = NULL,
      progress(
        "percent_modal", value = 0, total = 100, progress_lab = T, label_complete = "All done!", 
        label = "Label showing {value} of {total}", size = "huge"
      )
    )
  )
)


server <- shinyServer(function(input, output, session) {
  
  observeEvent(input$btn_modal,{
    show_modal("modal_progress")
    
    
    for (i in 1:100){
      Sys.sleep(0.5)
      update_progress(session, "percent_modal", type = "increment", value = 1)
    }
    
    remove_modal("modal_progress")
  })
})

shinyApp(ui = ui, server = server)

But 3 problems appear :

• The update_progress do not work inside a modal,
• When it finished, there is the dimmed effect rest on the screen, and there is nothing that I can do to remove the effect.
• I can remove the modal by clicking outside the box

Thank you,
Arthur

[dokato]

hi @ashbaldry you helped with the progress bar, any idea why it gets stuck inside modal?

[ashbaldry]

Not sure why it doesn't work in the modal, it might be an initialisation problem, but can have a further look into it.

[ashbaldry]

Having looked more into this, the progress does work in the modal, but it's the multiple updates in one function call that is causing issues. In the above example, it seems to run the whole for loop before updating the UI. This isn't exclusive to shiny, as it is reproducible in Fomantic UI.

I have logged a bug in the Fomantic repository if you are interested: fomantic/Fomantic-UI#1936

[lubber-de]

A described in the Fomantic issue this isn't a bug, as the browser will only render the final result when you call progress inside a loop. As suggested, you should rather use setTimeout or requestanimationframe if you want to see the progress growing step by step

[ashbaldry]

Thanks @lubber-de for your help, it has helped find the actual issue.

Looks like it is down to the input binding of the progress bar, it stays in a loading mode until the server code is complete. That is why the Progress toast works and the example above doesn't. I'll have a look at changing the progress from an input to a general widget.

[ashbaldry]

For the second and third points @ArthurPERE
2. If you use hide_modal instead of remove_modal it will undim the background
3. Add settings = list(c("closable", "false")) in the modal to prevent closing