[progress] Progress Bar Doesn't Update within Loops

[ashbaldry]

Bug Report

When trying to update the progress bar multiple times in a loop, the progress bar doesn't update until the loop has completed, rather than once per iteration.

Steps to reproduce

1. Create a basic progress bar
2. Run a loop to increase the value (.progress('increment', 1)), making sure there is a significant time between each increment

Expected result

After each iteration, the progress bar increases by one percent

Actual result

After the final iteration, the progress bar increases by ten percent

Testcase

https://jsfiddle.net/bw0uxkje/

Screenshot (if possible)

Fomantic-UI.Sandbox.-.JSFiddle.-.Code.Playground.-.Personal.-.Microsoft.Edge.2021-03-28.17-11-08.mp4

Version

2.8.7

[lubber-de]

This is not a bug in Fomantic, but the nature of Javascript and browser handling. The DOM won't be updated by the browser until the current running Javascript ends. As you are triggering the Progress multiple times inside a running loop, only the final result will be shown when the outer for loop ends.

Two technical solutions:

Use requestAnimationFrame... But this is, according to your example, still too fast as it will wait for the next vsync of your graphics card, but you can at least see it will handle the progress update individually.
https://jsfiddle.net/lubber/r056x7td/15/

Use setTimeOut to handle each progress update in a separate js context. This shows every progress update according to your needs
https://jsfiddle.net/lubber/r056x7td/19/

[ashbaldry]

Thanks for the clarification and the solutions, it makes a lot more sense why it wasn't working now.