title: not sure where to insert my progress bar component for the api call
body: <ul>
  <li>I am trying to learn material ui</li>
  <li>i got the progress bar.</li>
  <li>but I need to load till my data is not loaded.</li>
  <li>not sure where to insert my progress bar component.</li>
  <li>can you tell me how to fix it while I make the api call.so that in future I will fix it myself</li>
  <li>providing my code snippet below.</li>
  <li>all my code is in ReceipeReviewCardList.js</li>
  </ul>
  
  <p><a href="https://codesandbox.io/s/04r2qwv5jv" rel="nofollow noreferrer">https://codesandbox.io/s/04r2qwv5jv</a></p>
  
  <pre><code>  getPlayerValues() {
      let comments = [];
      fetch("https://jsonplaceholder.typicode.com/comments")
        .then(response =&gt; response.json())
        .then(json =&gt; {
          comments = json;
          // comments = comments.slice(0,3);
          this.setState({ comments: comments });
          this.setState({ activeComments: comments.slice(0, 10) });
          //console.log(comments);
        });
    }
  
    render() {
      let listView = this.state.activeComments.map(comment =&gt; (
        &lt;RecipeReviewCard
          key={comment.id}
          commentId={comment.id}
          cardBelowContent={comment.body}
          cardContent={comment.name}
          comment={comment}
        /&gt;
      ));
      return this.state.comments.length &gt; 0 ? (
        &lt;div&gt;
          &lt;LinearDeterminate /&gt;
          {listView}
          &lt;br /&gt;
  
          &lt;Pagination
            activePage={this.state.activePage}
            itemsCountPerPage={10}
            totalItemsCount={this.state.comments.length}
            pageRangeDisplayed={5}
            onChange={this.handlePageChange}
          /&gt;
        &lt;/div&gt;
      ) : (
        ""
      );
    }
  </code></pre>