More lazy

packages/core/pluggableElementTypes/ViewType.ts

@@ -10,7 +10,7 @@ type ViewReactComponent = React.ComponentType<{
 }>
 
 export default class ViewType extends PluggableElementBase {
-  ReactComponent?: ViewReactComponent
+  ReactComponent: ViewReactComponent
 
   stateModel: IAnyModelType
 

plugins/data-management/src/HierarchicalTrackSelectorWidget/components/HierarchicalTrackSelector.js

@@ -1,5 +1,12 @@
 /* eslint-disable react/prop-types,no-nested-ternary,jsx-a11y/no-static-element-interactions,jsx-a11y/click-events-have-key-events */
-import React, { useCallback, useState, useRef, useEffect } from 'react'
+import React, {
+  Suspense,
+  lazy,
+  useCallback,
+  useState,
+  useRef,
+  useEffect,
+} from 'react'
 import {
   Checkbox,
   Fab,
@@ -30,10 +37,10 @@ import { readConfObject } from '@jbrowse/core/configuration'
 import { observer } from 'mobx-react'
 import { VariableSizeTree } from 'react-vtree'
 
-import CloseConnectionDialog from './CloseConnectionDialog'
-import DeleteConnectionDialog from './DeleteConnectionDialog'
-import ManageConnectionsDialog from './ManageConnectionsDialog'
-import ToggleConnectionsDialog from './ToggleConnectionsDialog'
+const CloseConnectionDialog = lazy(() => import('./CloseConnectionDialog'))
+const DeleteConnectionDialog = lazy(() => import('./DeleteConnectionDialog'))
+const ManageConnectionsDialog = lazy(() => import('./ManageConnectionsDialog'))
+const ToggleConnectionsDialog = lazy(() => import('./ToggleConnectionsDialog'))
 
 const useStyles = makeStyles(theme => ({
   searchBox: {
@@ -196,12 +203,6 @@ const HierarchicalTree = observer(({ height, tree, model }) => {
   const session = getSession(model)
   const { filterText } = model
 
-  //   const rootNode = {
-  //     name: 'Tracks',
-  //     id: 'Tracks',
-  //     children: tree,
-  //   }
-
   const extra = {
     onChange: trackId => model.view.toggleTrack(trackId),
     onMoreInfo: setMoreInfo,
@@ -494,36 +495,39 @@ const HierarchicalTrackSelectorHeader = observer(
           }}
           menuItems={menuItems}
         />
-        {modalInfo ? (
-          <CloseConnectionDialog
-            modalInfo={modalInfo}
-            setModalInfo={setModalInfo}
-            session={session}
-          />
-        ) : deleteDialogDetails ? (
-          <DeleteConnectionDialog
-            handleClose={() => {
-              setDeleteDialogDetails(undefined)
-            }}
-            deleteDialogDetails={deleteDialogDetails}
-            session={session}
-          />
-        ) : null}
-        {connectionManagerOpen ? (
-          <ManageConnectionsDialog
-            handleClose={() => setConnectionManagerOpen(false)}
-            breakConnection={breakConnection}
-            session={session}
-          />
-        ) : null}
-        {connectionToggleOpen ? (
-          <ToggleConnectionsDialog
-            handleClose={() => setConnectionToggleOpen(false)}
-            session={session}
-            breakConnection={breakConnection}
-            assemblyName={assemblyName}
-          />
-        ) : null}
+
+        <Suspense fallback={<div />}>
+          {modalInfo ? (
+            <CloseConnectionDialog
+              modalInfo={modalInfo}
+              setModalInfo={setModalInfo}
+              session={session}
+            />
+          ) : deleteDialogDetails ? (
+            <DeleteConnectionDialog
+              handleClose={() => {
+                setDeleteDialogDetails(undefined)
+              }}
+              deleteDialogDetails={deleteDialogDetails}
+              session={session}
+            />
+          ) : null}
+          {connectionManagerOpen ? (
+            <ManageConnectionsDialog
+              handleClose={() => setConnectionManagerOpen(false)}
+              breakConnection={breakConnection}
+              session={session}
+            />
+          ) : null}
+          {connectionToggleOpen ? (
+            <ToggleConnectionsDialog
+              handleClose={() => setConnectionToggleOpen(false)}
+              session={session}
+              breakConnection={breakConnection}
+              assemblyName={assemblyName}
+            />
+          ) : null}
+        </Suspense>
       </div>
     )
   },

plugins/linear-genome-view/src/LinearBasicDisplay/components/SetMaxHeight.tsx

@@ -27,15 +27,15 @@ const useStyles = makeStyles(theme => ({
 
 export default observer(
   (props: {
-    display: {
+    model: {
       maxHeight?: number
       setMaxHeight: Function
     }
     handleClose: () => void
   }) => {
-    const { display, handleClose } = props
+    const { model, handleClose } = props
     const classes = useStyles()
-    const { maxHeight = '' } = display
+    const { maxHeight = '' } = model
     const [max, setMax] = useState(`${maxHeight}`)
 
     return (
@@ -71,7 +71,7 @@ export default observer(
               type="submit"
               style={{ marginLeft: 20 }}
               onClick={() => {
-                display.setMaxHeight(
+                model.setMaxHeight(
                   max !== '' && !Number.isNaN(+max) ? +max : undefined,
                 )
                 handleClose()

plugins/linear-genome-view/src/LinearBasicDisplay/model.ts

@@ -1,3 +1,4 @@
+import { lazy } from 'react'
 import { ConfigurationReference, getConf } from '@jbrowse/core/configuration'
 import { getParentRenderProps } from '@jbrowse/core/util/tracks'
 import { getSession } from '@jbrowse/core/util'
@@ -6,7 +7,8 @@ import VisibilityIcon from '@material-ui/icons/Visibility'
 import { types, Instance } from 'mobx-state-tree'
 import { AnyConfigurationSchemaType } from '@jbrowse/core/configuration/configurationSchema'
 import { BaseLinearDisplay } from '../BaseLinearDisplay'
-import SetMaxHeightDlg from './components/SetMaxHeight'
+
+const SetMaxHeightDlg = lazy(() => import('./components/SetMaxHeight'))
 
 const stateModelFactory = (configSchema: AnyConfigurationSchemaType) =>
   types
@@ -112,7 +114,9 @@ const stateModelFactory = (configSchema: AnyConfigurationSchemaType) =>
             {
               label: 'Set max height',
               onClick: () => {
-                getSession(self).setDialogComponent(SetMaxHeightDlg, self)
+                getSession(self).setDialogComponent(SetMaxHeightDlg, {
+                  model: self,
+                })
               },
             },
           ]

products/jbrowse-web/src/Loader.tsx

@@ -8,8 +8,8 @@ import { openLocation } from '@jbrowse/core/util/io'
 import ErrorBoundary from 'react-error-boundary'
 import {
   StringParam,
-  useQueryParam,
   QueryParamProvider,
+  useQueryParam,
 } from 'use-query-params'
 import { AnyConfigurationModel } from '@jbrowse/core/configuration/configurationSchema'
 import { types, addDisposer, Instance, SnapshotOut } from 'mobx-state-tree'
@@ -33,8 +33,9 @@ import JBrowse from './JBrowse'
 import JBrowseRootModelFactory from './rootModel'
 import packagedef from '../package.json'
 import factoryReset from './factoryReset'
-import SessionWarningModal from './sessionWarningModal'
-import ConfigWarningModal from './configWarningModal'
+
+const SessionWarningDialog = lazy(() => import('./SessionWarningDialog'))
+const ConfigWarningDialog = lazy(() => import('./ConfigWarningDialog'))
 
 const StartScreen = lazy(() => import('./StartScreen'))
 
@@ -566,7 +567,6 @@ const Renderer = observer(
               {`${err}`}
               {snapshotError ? (
                 <>
-                  {' '}
                   ... Failed element had snapshot:
                   <pre
                     style={{
@@ -590,34 +590,38 @@ const Renderer = observer(
         loader.setSessionTriaged(undefined)
       }
       return loader.sessionTriaged.origin === 'session' ? (
-        <SessionWarningModal
-          onConfirm={() => {
-            const session = JSON.parse(
-              JSON.stringify(loader.sessionTriaged.snap),
-            )
-            loader.setSessionSnapshot({ ...session, id: shortid() })
-            handleClose()
-          }}
-          onCancel={() => {
-            loader.setBlankSession(true)
-            handleClose()
-          }}
-        />
+        <Suspense fallback={<div />}>
+          <SessionWarningDialog
+            onConfirm={() => {
+              const session = JSON.parse(
+                JSON.stringify(loader.sessionTriaged.snap),
+              )
+              loader.setSessionSnapshot({ ...session, id: shortid() })
+              handleClose()
+            }}
+            onCancel={() => {
+              loader.setBlankSession(true)
+              handleClose()
+            }}
+          />
+        </Suspense>
       ) : (
-        <ConfigWarningModal
-          onConfirm={async () => {
-            const session = JSON.parse(
-              JSON.stringify(loader.sessionTriaged.snap),
-            )
-            await loader.fetchPlugins(session)
-            loader.setConfigSnapshot({ ...session, id: shortid() })
-            handleClose()
-          }}
-          onCancel={() => {
-            factoryReset()
-            handleClose()
-          }}
-        />
+        <Suspense fallback={<div />}>
+          <ConfigWarningDialog
+            onConfirm={async () => {
+              const session = JSON.parse(
+                JSON.stringify(loader.sessionTriaged.snap),
+              )
+              await loader.fetchPlugins(session)
+              loader.setConfigSnapshot({ ...session, id: shortid() })
+              handleClose()
+            }}
+            onCancel={() => {
+              factoryReset()
+              handleClose()
+            }}
+          />
+        </Suspense>
       )
     }
     if (pm) {