title: React: How to get loading spinner to show whilst API data loads into my chart.js chart
body: <p>I want a loading spinner to appear on the screen whilst API data loads and then the chart to appear and the spinner to disappear once it's all loaded.</p>
  <p>I have managed to get the spinner to appear but the chart does not ever load - I am accessing the API and there are no errors, I know my code is wrong whether it's the order, etc.. but I cannot work out how to get it all to fit together.</p>
  <p>code is below</p>
  <pre><code>import React, { useState, useEffect } from &quot;react&quot;;
  import { Line } from &quot;react-chartjs-2&quot;;
  import * as ReactBootStrap from 'react-bootstrap';
  import axios from &quot;axios&quot;;
  import './Chart.css';
  
  const Chart3 = () =&gt; {
      //Setting states for later use
    const [chartData, setChartData] = useState({});
    const [chartItem, setChartItem] = useState(null);
    const [loading, setLoading] = useState(false);
  
    const Chart = async () =&gt; {
        //Setting up variables to store data
      let Fore = [];
      let Act = [];
      try{
        const data = await axios
          .get('https://api.carbonintensity.org.uk/intensity/2020-09-01T15:30Z/2020-09-10T17:00Z')
          .then(res =&gt; {
            console.log(res);
            for (const dataObj of res.data.data) {
              Fore.push(parseInt(dataObj.intensity.forecast));
              Act.push(parseInt(dataObj.intensity.actual));
              setChartItem(res.data.data);
            }
            //Now setting chart data now we have the data from API and parsed it 
            setLoading(true)
            setChartData({
              labels: Fore,
              datasets: [
                {
                  label: &quot;Carbon Intensity Levels&quot;,
                  data: Act,
                  backgroundColor: &quot;#F58A07&quot;,
                  borderWidth: 4
                }
              ]
            });
        })
      } catch (e) {
        console.log(e)
      }
  
      useEffect(() =&gt; {
      Chart();
      }, []);
    }
  
  
  
  
  //Chart is rendered below - data is accessed from chartData and the settings of the chart is configured under options
    return (
      &lt;div className=&quot;App&quot;&gt;
        &lt;h1&gt;&lt;/h1&gt;
        &lt;div className=&quot;chart&quot;&gt;
          {loading ? 
          &lt;Line
            data={chartData}
            options={{
              responsive: true,
              title: { text: &quot;2020-09-01T15:30Z - 2020-09-10T17:00Z&quot;, display: true },
              scales: {
                yAxes: [
                  {
                    ticks: {
                      autoSkip: true,
                      maxTicksLimit: 100,
                      beginAtZero: true
                    },
                    gridLines: {
                      display: false
                    },
                    scaleLabel: {
                        display: true,
                        labelString: &quot;Actual&quot;
                    }
                  }
                ],
                xAxes: [
                  {
                    gridLines: {
                      display: false
                    },
                    scaleLabel: {
                        display: true,
                        labelString: &quot;Forecast&quot;
                    }
  
                  }
                ]
              }
            }} /&gt; : &lt;ReactBootStrap.Spinner animation=&quot;border&quot;/&gt; }
        &lt;/div&gt;
      &lt;/div&gt;
    );
  };
  
  export default Chart3;
  </code></pre>