If continuousStart and complete are called within the same render they may get stucked

[danielo515]

Hello, and thanks for this great piece of UI. The bug I'm reporting is probably a minor one, because you can always call complete a second time to be sure, but anyway. I am using Apollo GraphQL and I am calling continuousStart when any query is triggered and complete when the query stops loading. It seems that, sometimes apollo can change state synchronously. Probably this makes that within the same render the state goes from loading to not loading, without even giving the components a chance to update or render. I think that it is because of this that I am having a problem with this library. I call the continuousStart on query start, and almost immediately complete is called. As a result, the bar completes and then starts again, but this time it never finishes. I have created a small codesanbox sample, let me know if it is enough to troubleshoot this:

https://codesandbox.io/s/peaceful-leakey-4g0u5?file=/src/index.js

[baumerdev]

It seems there is a race condition problem. The settings for continuous display are stored in a useState var which is set asynchronously. If you call the complete() method in the same cycle the "active" prop is still true when the interval is set up. I tried to change the var in question from useState to synchronous useRef which seems to prevent this problem.

[schotime]

Just had this manifest on me with a react 18 upgrade.

I've used this as a workaround for now.

setTimeout(() => {
  ref.current!.complete();
}, 0);

[klendi]

Just merged this fix