Loading component about react-jsx-highcharts HOT 9 CLOSED

Hi @will-stone I've just published the new <Loading /> component in 2.0.3, here is an example of it's usage.

It can be used with the isLoading bool like you originally proposed, or by mounting and unmounting (without requiring the isLoading prop), like I proposed.

from react-jsx-highcharts.

Good idea, although most components in this library work on componentDidMount/componentWillUnmount hooks to trigger show/hide behaviour on Highcharts, rather than working off a prop;

import React, { Component } from 'react';

class Loading extends Component {
  componentDidMount () {
    const chart = this.props.getChart();
    chart.showLoading('Loading...');
  }

  componentWillUnmount () {
    const chart = this.props.getChart();
    chart.hideLoading();
  }

  render() {
    return null;
  }
}

export default Loading

It's also preferable the the provideChart HOC is applied in the index.js as it makes the component easier to test.

import Loading from './Loading ';
import provideChart from '../ChartProvider';
export default provideChart(Loading);

I would love it if we could we could pass some child components to Loading so we can render our own Loading icon.

Perhaps we can use React 16's new createPortal behaviour to render content into the .highcharts-loading div?

Possible something like...

render () {
    const { children, getChartContainer } = this.props; // getChartContainer doesn't exist ATM
    return ReactDOM.createPortal(children, getChartContainer().querySelector('.highcharts-loading'));
}

Although we may need to wait for the .highcharts-loading div to be present before we use it as a portal.

from react-jsx-highcharts.

Sounds good. However, if the data is being polled and passed in, how would you notify the Loading component that data is being fetched without a prop?

from react-jsx-highcharts.

Something like

constructor (props) {
  super(props};
  this.state = { isLoading: true };
}

componentWillMount () {
  fetch('web.url').then(res => {
    this.setState({ isLoading: false });
  });
}

render () {
  const { isLoading } = this.state;
  return (
    <HighchartsChart>
      {isLoading && <Loading />}
      // etc
    </HighchartsChart>
  );
}

Although, now I see it written out like that, it's possibly overly complicated... hmm what're your thoughts?

from react-jsx-highcharts.

No, that makes sense. Really, the only change is

<Loading isLoading={isLoading}/>

to

{isLoading && <Loading />}

I'm happy with that solution 😄

from react-jsx-highcharts.

That's great, thanks!

from react-jsx-highcharts.

Does this also work on HighchartsStockChart?

from react-jsx-highcharts.

@brucevanhorn2 yep, anything that is available for HighchartsChart should work for HighchartsStockChart too

from react-jsx-highcharts.

is see that you cant really pass anything other than string to the Loading, is there way we can pass react component

from react-jsx-highcharts.