Progressive web app idea

app.js

import React from 'react';

import LineChart from './LineChartAsync';
import BarChart from './BarChartAsync';

export default class App extends React.Component {
    state = {
        showCharts: false
    };

    handleChange = () => {
        this.setState({
            showCharts: !this.state.showCharts
        });
    }

    render() {
        return (
            <div>
                Show charts:
                <input
                  type="checkbox"
                  value={this.state.showCharts}
                  onChange={this.handleChange}
                />

                {
                    this.state.showCharts ?
                    <div><LineChart/><BarChart/></div>
                    : null
                }
            </div>
        );
    }
}

asyncComponent.js

import React from 'react';

export default class AsyncComponent extends React.Component {
    state = {
        component: null
    }
    componentDidMount() {
        this.props.loader((componentModule) => {
          this.setState({
              component: componentModule.default
          });
        });
    }
    renderPlaceholder() {
      return <div>Loading</div>;
    }
    render() {
        if (this.state.component) {
            return <this.state.component/>
        }
        return (this.props.renderPlaceholder || this.renderPlaceholder)();
    }
}

AsyncComponent.propTypes = {
    loader: React.PropTypes.func.isRequired,
    renderPlaceholder: React.PropTypes.func
};

BarAsyncChat.js

import React from 'react';
import AsyncComponent from './AsyncComponent';
import scheduleLoad from './loader';

const loader = (cb) => {
  require.ensure([], (require) => {
      cb(require('./BarChart'))
  });
}

scheduleLoad(loader);

export default (props) =>
  <AsyncComponent {...props} loader={loader}/>

BarChat.js

import React from 'react';
import {Stage, Layer, Rect} from 'react-konva';

export default () => (
    <Stage width={100} height={100}>
        <Layer>
            <Rect fill="red" width={20} height={20}/>
            <Rect fill="blue" x={50} width={20} height={60}/>
        </Layer>
    </Stage>
);

index.js

import React from 'react';
import ReactDOM from 'react-dom';

import App from './components/app';

ReactDOM.render(<App/>, document.querySelector('#container'));

LineAsyncChat.js

import React from 'react';
import AsyncComponent from './AsyncComponent';
import scheduleLoad from './loader';

const loader = (cb) => {
  require.ensure([], (require) => {
      cb(require('./LineChart'))
  });
}

scheduleLoad(loader);

export default (props) =>
  <AsyncComponent {...props} loader={loader}/>

LineChart.js

import React from 'react';
import {Stage, Layer, Line} from 'react-konva';

export default () => (
    <Stage width={100} height={100}>
        <Layer>
            <Line stroke="green" points={[0, 0, 20, 90, 50, 20, 100, 100]}/>
        </Layer>
    </Stage>
);

loader.js

const queue = [];
const delay = 300;

let isWaiting = false;


function requestLoad() {
    if (isWaiting) {
      return;
    }
    if (!queue.length) {
      return;
    }
    const loader = queue.pop();
    isWaiting = true;
    loader(() => {
      setTimeout(() => {
        isWaiting = false;
        requestLoad();
      }, delay)
    });
}

export default function scheduleLoad(loader) {
  queue.push(loader);
  requestLoad();
}

webpack.config.js

var webpack = require('webpack');
var path = require('path');


module.exports = {
    entry: {
        src: './src/index.js'
    },
    output: {
        path: __dirname + '/dist',
        filename: 'bundle.js'
    },
    module: {
        loaders: [
            {
                test: /\.jsx?$/,
                exclude: /(node_modules|bower_components)/,
                loader: ['babel'],
                query: {
                    presets: [
                        'babel-preset-es2015',
                        'babel-preset-stage-0',
                        'babel-preset-react'
                    ]
                }
            }
        ]
    },
    plugins: [
      new webpack.optimize.UglifyJsPlugin({
          compressor: {
              warnings: false
          }
      }),
      new webpack.optimize.CommonsChunkPlugin({
        children: true,
        // (use all children of the chunk)
        async: true,
        // (create an async commons chunk)
      }),
      new webpack.optimize.DedupePlugin(),
      new webpack.DefinePlugin({
          'process.env': {
              NODE_ENV: JSON.stringify('production')
          }
      }),
    ]
};