loadable plotly

src/ChartBlock/Edit.jsx

@@ -52,7 +52,16 @@ class Edit extends Component {
   }
 
   render() {
-    const plotly = require('plotly.js/dist/plotly');
+    const plotly = Loadable({
+      loader: () => import('plotly.js/dist/plotly'),
+      loading() {
+        return <div>Loading chart editor...</div>;
+      },
+    });
+
+    const selectProviders = this.props.providers.map(el => {
+      return [el['@id'], el.title];
+    });
 
     const chartData = this.props.data.chartData || {
       layout: {},

src/Widget/ModalEditor.jsx

@@ -36,8 +36,13 @@ class Edit extends Component {
   constructor(props) {
     super(props);
     this.state = {
-      plotly: require('plotly.js/dist/plotly'),
       providerData: null,
+      plotly: Loadable({
+        loader: () => import('plotly.js/dist/plotly'),
+        loading() {
+          return <div>Loading chart editor...</div>;
+        },
+      }),
     };
   }
 

src/Widget/Widget.jsx

@@ -2,6 +2,7 @@ import ChartEditor from './ModalEditor';
 import React, { Component } from 'react';
 import { Button, Modal, Form, Grid, Label } from 'semantic-ui-react';
 import { map } from 'lodash';
+import Loadable from 'react-loadable';
 
 class ModalChartEditor extends Component {
   constructor(props) {
@@ -69,7 +70,13 @@ class ChartWidget extends Component {
       height: this.props.value?.layout?.height || 240,
     };
 
-    const LoadablePlot = require('react-plotly.js').default;
+    const LoadablePlot = Loadable({
+      loader: () => import('react-plotly.js'),
+      loading() {
+        return <div>Loading chart editor...</div>;
+      },
+    }).default;
+
     return (
       <Form.Field
         inline

src/index.js

@@ -1,3 +0,0 @@
-import plotly from 'react-plotly.js';
-
-export default plotly;