React toolbox - Circular ProgressBar only animating rotation while loading JSON

Question

Edit: It seems that the problem was not with the loading part, but it was actually react that didn't like handling so much elements. I will update this post with details as soon as I have a chance to confirm what was happening. My first test JSON was a bunch of duplicated entries (so my file would take some time to load) that triggered some component rendering, I had something like ~40000 entries in my Json. Testing with a new json containing only 3 entries, each with a lot of nested data, so my file is still heavy and takes some time to load, did fix the issue.

I absolutely fail to understand how this is even possible: I have a json that I'm loading on http://code.pensionsmilitaires.com/codes

During load time, the circle path element is not animated. Just wait for the json to finish loading to see the same ProgressBar animated correctly...

Here is my render function

render() {
  console.log("Rendering");
  if (this.state.codes.length < 1) {
    return (
      <ProgressBar type="circular" mode="indeterminate" multicolor/>
    );
  }
  return (
    <div>
      <ProgressBar type="circular" mode="indeterminate" multicolor/>
       <h2>Liste des codes disponibles</h2>
      <div>
        {this.state.codes.map((code, i) => (
          <CodeSummary key={i} code={code}/>
        ))}
      </div>
    </div>
  );
}

If anyone has an idea on how I can fix this, that would be awesome! Thanks for reading my question anyway ^^

Answer 1

So a few years later, just for the sake of making sure anyone having the same kind of issue gets an answer.

React was actually being busy rendering thousands of elements, which froze the JavaScript based animation of the svg path-offset until React freed the thread.

As a result, the circular progress bar was not animating until React was done rendering.

In such cases where you have to render tons of things, windowing, or virtualizing a long list and React concurrent mode can be helpful