Improve application size and loading type

by by nucleus

app/src/App.tsx

@@ -6,7 +6,7 @@ import { Theme, withStyles } from '@material-ui/core/styles'
 import { AppState } from './reducers'
 import Connection from './components/ConnectionSetup/Connection'
 import CssBaseline from '@material-ui/core/CssBaseline'
-import Settings from './components/Settings'
+const Settings = React.lazy(() => import('./components/Settings'))
 import Sidebar from './components/Sidebar/Sidebar'
 import TitleBar from './components/TitleBar'
 import Tree from './components/Tree/Tree'
@@ -36,7 +36,9 @@ class App extends React.Component<Props, {}> {
       <div className={centerContent}>
         <CssBaseline />
         <ErrorBoundary>
-          <Settings />
+          <React.Suspense fallback={<div>Loading...</div>}>
+            <Settings />
+          </React.Suspense>
           <div className={`${settingsVisible ? contentShift : content} ${heightProperty}`}>
               <TitleBar />
               <div className={centerContent}>

app/src/actions/Settings.ts

@@ -4,8 +4,8 @@ import { Dispatch } from 'redux'
 import { showTree } from './Tree'
 import { AppState } from '../reducers'
 import * as q from '../../../backend/src/Model'
-import { batchActions, enableBatching, batchDispatchMiddleware } from 'redux-batched-actions';
-import { autoExpandLimitSet } from '../components/Settings';
+import { batchActions } from 'redux-batched-actions'
+import { autoExpandLimitSet } from '../components/Settings'
 
 export const setAutoExpandLimit = (autoExpandLimit: number = 0): Action => {
   return {
@@ -36,7 +36,7 @@ export const filterTopics = (filterStr: string) => (dispatch: Dispatch<any>, get
   })
 
   if (!filterStr || !tree) {
-    dispatch(batchActions([setAutoExpandLimit(0), showTree(tree)]))
+    dispatch(batchActions([setAutoExpandLimit(0), (showTree(tree) as any)]))
     return
   }
 
@@ -69,7 +69,7 @@ export const filterTopics = (filterStr: string) => (dispatch: Dispatch<any>, get
     nextTree.updateWithConnection(tree.updateSource, tree.connectionId, nodeFilter)
   }
 
-  dispatch(batchActions([setAutoExpandLimit(autoExpandLimitForTree(nextTree)), showTree(nextTree)]))
+  dispatch(batchActions([setAutoExpandLimit(autoExpandLimitForTree(nextTree)), (showTree(nextTree) as any)]))
 }
 
 function autoExpandLimitForTree(tree: q.Tree) {
@@ -78,7 +78,6 @@ function autoExpandLimitForTree(tree: q.Tree) {
   }
   function closestExistingLimit(i: number): number {
     const sorted = autoExpandLimitSet.sort((a, b) => Math.abs(a.limit - i) - Math.abs(b.limit - i))
-    console.log('sorted', i, sorted)
     return sorted[0]!.limit
   }
 

app/src/actions/Tree.ts

@@ -1,10 +1,10 @@
 import { AppState } from '../reducers'
 import { ActionTypes } from '../reducers/Tree'
 import * as q from '../../../backend/src/Model'
-import { Dispatch } from 'redux'
+import { Dispatch, AnyAction } from 'redux'
 import { setTopic } from './Publish'
 
-export const selectTopic = (topic: q.TreeNode) => (dispatch: Dispatch<any>, getState: () => AppState)  => {
+export const selectTopic = (topic: q.TreeNode) => (dispatch: Dispatch<any>, getState: () => AppState): AnyAction  => {
   const { selectedTopic } = getState().tree
 
   // Update publish topic
@@ -12,13 +12,13 @@ export const selectTopic = (topic: q.TreeNode) => (dispatch: Dispatch<any>, getS
     dispatch(setTopic(topic.path()))
   }
 
-  dispatch({
+  return dispatch({
     selectedTopic: topic,
     type: ActionTypes.TREE_SELECT_TOPIC,
   })
 }
 
-export const showTree = (tree?: q.Tree) => (dispatch: Dispatch<any>, getState: () => AppState)  => {
+export const showTree = (tree?: q.Tree) => (dispatch: Dispatch<any>, getState: () => AppState): AnyAction  => {
   const visibleTree = getState().tree.tree
   const connectionTree = getState().connection.tree
 
@@ -27,7 +27,7 @@ export const showTree = (tree?: q.Tree) => (dispatch: Dispatch<any>, getState: (
     visibleTree.stopUpdating()
   }
 
-  dispatch({
+  return dispatch({
     tree,
     type: ActionTypes.TREE_SHOW_TREE,
   })

app/src/components/ConnectionSetup/Connection.tsx

@@ -26,7 +26,7 @@ import Notification from './Notification'
 import Visibility from '@material-ui/icons/Visibility'
 import VisibilityOff from '@material-ui/icons/VisibilityOff'
 
-import sha1 = require('sha1')
+const sha1 = require('sha1')
 import { AppState } from '../../reducers'
 import { bindActionCreators } from 'redux'
 import { connectionActions } from '../../actions'

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)}>

app/src/tracking.ts

@@ -8,17 +8,17 @@ if (!userId) {
   window.localStorage.setItem('userId', userId)
 }
 
-const Nucleus = require('electron-nucleus')('5c3b3e0443b7cc00eec3782b', {
-  userId,
-  disableInDev: true,
-})
+// const Nucleus = require('electron-nucleus')('5c3b3e0443b7cc00eec3782b', {
+//   userId,
+//   disableInDev: true,
+// })
 
-export default Nucleus
+// export default Nucleus
 
 export function trackEvent(name: string) {
   if (name.match(/^@@redux/)) {
     return
   }
-  Nucleus.track(name)
+  // Nucleus.track(name)
   electronRendererTelementry.trackEvent(name)
 }