Improve application size and loading type

by by nucleus

app/src/components/Sidebar/MessageHistory.tsx

@@ -4,7 +4,7 @@ import * as q from '../../../../backend/src/Model'
 import BarChart from '@material-ui/icons/BarChart'
 import DateFormatter from '../helper/DateFormatter'
 import History from './History'
-import PlotHistory from './PlotHistory'
+const PlotHistory = React.lazy(() => import('./PlotHistory'))
 
 const throttle = require('lodash.throttle')
 
@@ -70,7 +70,11 @@ class MessageHistory extends React.Component<Props, State> {
   }
 
   public renderPlot(numericMessages: q.Message[]) {
-    return <PlotHistory messages={numericMessages} />
+    return (
+      <React.Suspense fallback={<div>Loading...</div>}>
+        <PlotHistory messages={numericMessages} />
+      </React.Suspense>
+    )
   }
 
   private displayMessage = (index: number, eventTarget: EventTarget) => {

app/src/components/Sidebar/Sidebar.tsx

@@ -23,9 +23,9 @@ import ExpandMore from '@material-ui/icons/ExpandMore'
 import Clear from '@material-ui/icons/Clear'
 import MessageHistory from './MessageHistory'
 import NodeStats from './NodeStats'
-import Publish from './Publish/Publish'
+const Publish = React.lazy(() => import('./Publish/Publish'))
 import Topic from './Topic'
-import ValueRenderer from './ValueRenderer'
+const ValueRenderer = React.lazy(() => import('./ValueRenderer'))
 import { connect } from 'react-redux'
 import { bindActionCreators } from 'redux'
 
@@ -112,7 +112,9 @@ class Sidebar extends React.Component<Props, State> {
           <ExpansionPanelDetails style={this.detailsStyle}>
             {this.messageMetaInfo()}
             <div ref={this.valueRef}>
+            <React.Suspense fallback={<div>Loading...</div>}>
               <ValueRenderer message={this.props.node && this.props.node.message} />
+            </React.Suspense>
             </div>
             <div><MessageHistory onSelect={this.handleMessageHistorySelect} node={this.props.node} /></div>
             <Popper open={Boolean(this.state.compareMessage)} anchorEl={this.valueRef.current} placement="left" transition={true}>
@@ -125,7 +127,9 @@ class Sidebar extends React.Component<Props, State> {
             <Typography className={classes.heading}>Publish</Typography>
           </ExpansionPanelSummary>
           <ExpansionPanelDetails style={this.detailsStyle}>
-            <Publish node={this.props.node} connectionId={this.props.connectionId} />
+            <React.Suspense fallback={<div>Loading...</div>}>
+              <Publish node={this.props.node} connectionId={this.props.connectionId} />
+            </React.Suspense>
           </ExpansionPanelDetails>
         </ExpansionPanel>
         <ExpansionPanel defaultExpanded={Boolean(this.props.node)}>