reactjs - React ツールボックス - JSON の読み込み中に回転のみをアニメーション化する円形の ProgressBar

Question

編集：問題は読み込み部分ではなかったようですが、実際にはあまり多くの要素を処理するのが好きではなかったのは反応でした。何が起こっているのかを確認する機会があり次第、この投稿を詳細で更新します. 私の最初のテスト JSON は、一部のコンポーネント レンダリングをトリガーする一連の重複したエントリ (ファイルの読み込みに時間がかかるため) でした。Json には ~40000 エントリのようなものがありました。3 つのエントリのみを含む新しい json でテストし、それぞれに多数のネストされたデータがあるため、ファイルがまだ重く、読み込みに時間がかかるため、問題は修正されました。

これがどのように可能であるかを完全に理解できません。http://code.pensionsmilitaires.com/codesにロードしているjsonがあります

読み込み中、円パス要素はアニメーション化されません。json の読み込みが完了するのを待って、同じ ProgressBar が正しくアニメーション化されるのを確認してください...

ここに私のレンダリング機能があります

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>
  );
}

誰かがこれを修正する方法についてアイデアを持っているなら、それは素晴らしいことです! とにかく私の質問を読んでくれてありがとう^^