I am trying to use the igx-linear-bar and are running into some issues. In my app the user requests to process a batch of files and as the are being processed i provide a feedback on the status. This happens from my backend via socket.io. First i send a message with the total record count, then after each s processed i send the update via socket.io to update the value of the bar.
Here is my observations if i test the bar lets say with a max value of 100 and just run a basic loop with out delay and return the updates via socket the bar will not complete even so the value was set to 100. Now if i go and but a delay between the updates the completion level will still depend based on delay. But in case of 100 it is around 50 milsecond which will reliable render the grid correctly.
The smaller the max value is the bigger of delay between updates is required. For a max of 10 it requires a delay of almost 250 ms to have the progress work correctly. On a max of 1000 i dont run most of time into any issues other the maybe that it shows 99% vs 100 once finished.
So my question is, is this an expected behavior ? Like i said showing 99% vs 100 % is not a huge deal but in the lower max values it might result into 50% to 70% which is less then ideal.
Also is there a way to force the progress bar to show 100% as it seems eve so the value = max it does not show as completed and 100%
Hello Steve,
I think I have realized from where the problem comes.
The progress bar internally runs it's animation through a requestAnimaitonFrame.
Basically from what I understood, in your project you are requesting some data which then it is passed to the progress bar right?That's great but this is another async operation which cause a collision between both async execution processes.
I can propose disabling the animation of the progressbar by setting it's animate input to false. In that's case you will no longer have that problem. Although if you still need animating, you can do it on your own by having your own function or implementation updating the value through setTimeout or requestAnimationFrame.
I have created a sample for you demonstrating both scenarios.We are striving to constantly improve our product and we tightly rely on our clients and their support and feedback. We believe that together we can build an incredible product that fully satisfies your needs.
Thanks for your patience and determination. I'm curious to understand whether this approach solves your problem?
not sure what this sample is good for as it is a grid sample. Just as an fyi if i use the angular material bar i do not get any of these issues at all, it renders fine without delay for small or large nbr's of max counter
It seems that plenty of things are happing in your app, which basically means that there are plenty of potential side effects. Generally, it could be everything, so I'm unable to say what may cause that behavior. Obviously, this is not expected and I'm curious to understand what could be the problem.
Therefore, I can give a suggestion and try to reproduce the problem here in this live-editable sample, in order to be fully aware of the case.
NOTE: Please do not forget to fork the sample from the above FORK button, before sending it back.
I'm looking forward to receive your problem, reproducible and functional.