How to show “loading…” text as a placeholder before my Apexcharts actually loads?

问题

I spent a day figuring this out but was unavailable to find a solution. Please if anyone can help.

So I was making a cryptocurrency tracker in React. I managed to create a table displaying several currencies and also a column where I render Apexchart for various currencies based on the JSON data that's already saved with me in a javascript file i.e I'm not making any call to API to get the data. I already have static data with me. I just rendered the static data in the form of a table.

Now the problem is with the loading time of the page. As I need to render apexcharts for all the currencies(I'm displaying 100 in total), displaying them slows down the user experience.

To improve the user experience I want to add a placeholder text "loading..." and when the apexchart is done loading only then I want to display the chart.

Below is my Graph component that's responsible for loading my apexchart.

import Chart from 'react-apexcharts';
import { ChartData } from '../data/ChartData';

class Graph extends Component {
  state = {
    options: {
      stroke: {
        width: 1.7,
      },
      grid: {
        show: false,
      },
      datalabels: {
        enabled: false,
      },
      tooltip: {
        enabled: false,
      },
      chart: {
        animations: {
          enabled: false,
        },
        toolbar: {
          show: false,
        },
        zoom: {
          enabled: false,
        },
      },
      yaxis: {
        show: false,
        labels: {
          formatter: function () {
            return '';
          },
        },
      },
      xaxis: {
        labels: {
          formatter: function () {
            return '';
          },
        },
        tooltip: {
          enabled: false,
        },
      },
    },

    series: [
      {
        name: 'USD',
        data: ChartData[this.props.idx].data,
      },
    ],
  };

  render() {
    return (
      <div className="graph">
        <div className="row">
          <div className="mixed-chart">
            <Chart
              options={this.state.options}
              series={this.state.series}
              type="line"
              width="200px"
              height="100px"
            />
          </div>
        </div>
      </div>
    );
  }
}

export default Graph;

![As you can see I have my Apexchart plotted. Now as it takes time to load the chart I want to add a placeholder text "loading" and when the chart loading completes I want to display the chart giving a better user experience]Screenshot

来源：https://stackoverflow.com/questions/65563562/how-to-show-loading-text-as-a-placeholder-before-my-apexcharts-actually-loa

标签

javascript

reactjs

charts

apexcharts