How to show progress during a long running script block

[nixtar]

I have a button that goes out and fetches some things that takes some time and I want to display a spinner/progress bar and update the page as it runs.

For eg:

New-PodeWebContainer -Content @(
    New-PodeWebContainer -Id "SpinnerContainer" -NoBackground -Content @(
        New-PodeWebText -Id "SpinnerTextID" -Value "We are loading some stuff... "
        New-PodeWebSpinner -Colour 'cornflowerblue'
    )        
    
    New-PodeWebButton -Name 'Update Progress' -ScriptBlock {
        Show-PodeWebComponent -Id "SpinnerContainer"
        
        Start-Sleep -Seconds 2 # Loading some stuff
        Update-PodeWebText -Id "SpinnerTextID" -Value "We are loading some more stuff... "
        Start-Sleep -Seconds 2 # Loading some more stuff
        
        Hide-PodeWebComponent -Id "SpinnerContainer"
    }
)

However the page does not update until after the script block has completely finished. Is there a way to provide on the fly updates during a long running script block?

[Badgerati]

Hi @nixtar,

Unfortunately at the moment this isn't possible. You miiight be able to get something like it working by using the FileStream element (https://badgerati.github.io/Pode.Web/Tutorials/Elements/FileStream/) and the user's session, though it'd be a little hacky.

This is something I do want to look at properly, by moving away from AJAX calls and using WebSockets instead - which would make this completely possible.

[nixtar]

Hey @Badgerati, thanks for the update.

Looking a bit deeper at the architecture this makes sense now. I wonder if I can rig something up with timers. Eg button updates the text then starts a timer for 1 second and so on. Pretty hacky either way. For now I'll just put a warning next to the button that it may take 20 seconds or so.

Its nice that the button has a spinner at least. Is it possible to change the button text while it's running?

[nixtar]

Whoops, fat finger clicked close 😋

[phdavis]

I'd consider this high impact. This would allow us to keep users updated as long running calls execute. Each Pode (API) route call is pretty fast, but when you compound multiple API calls this adds up quickly. Some of our pages require 5+ API calls to check things. We'd like to be able to display real time results to the end user so they're not simply watching the spinner and we can back out early when a preceding check fails.

Like nixtar, we could simply say "This process may take X amount of time" and to be patient while everything runs, but users are not usually patient so that creates some... fun.

@nixtar did you figure out any sort of workaround in the meantime?

[Badgerati]

I'm currently testing a move to JS and WebSockets which will enable this, hoping to have it for 0.9.0.

[Badgerati]

This is now achievable via #455, and currently available in v1.0.0-preview1