pinterest · czgu · Jul 1, 2021 · Jul 1, 2021 · Jul 1, 2021 · Jul 1, 2021
diff --git a/querybook/webapp/components/AppAdmin/AppAdmin.tsx b/querybook/webapp/components/AppAdmin/AppAdmin.tsx
@@ -31,7 +31,7 @@ import './AppAdmin.scss';
 const ENTITY_SIDEBAR_WIDTH = 200;
 const NAV_SIDEBAR_WIDTH = 200;
 
-export const AppAdmin: React.FunctionComponent = () => {
+const AppAdmin: React.FunctionComponent = () => {
     const { entity: selectedEntity }: { entity: AdminEntity } = useParams();
 
     const { data: environments, forceFetch: loadEnvironments } = useDataFetch<
@@ -280,3 +280,5 @@ const AdminTaskStatus: React.FC = () => (
         <TaskStatus />
     </div>
 );
+
+export default AppAdmin;
diff --git a/querybook/webapp/components/AppRouter/AppRouter.tsx b/querybook/webapp/components/AppRouter/AppRouter.tsx
@@ -1,31 +1,35 @@
 import React from 'react';
 import { Router, Route, Switch } from 'react-router-dom';
 
-import { AppAdmin } from 'components/AppAdmin/AppAdmin';
 import { UserLoader } from 'components/UserLoader/UserLoader';
-import { EnvironmentsRouter } from 'components/EnvironmentsRouter/EnvironmentsRouter';
-
 import history from 'lib/router-history';
-
 import { AppLayout } from 'components/AppLayout/AppLayout';
 import { ConfirmationManager } from 'components/ConfirmationManager/ConfirmationManager';
 import { ToastManager } from 'ui/ToastManager/ToastManager';
 import { FourOhFour } from 'ui/ErrorPage/FourOhFour';
+import { Loading } from 'ui/Loading/Loading';
+
+const AppAdmin = React.lazy(() => import('components/AppAdmin/AppAdmin'));
+const EnvironmentsRouter = React.lazy(() =>
+    import('components/EnvironmentsRouter/EnvironmentsRouter')
+);
 
 export const AppRouter: React.FunctionComponent = () => (
     <Router history={history}>
         <UserLoader>
             <AppLayout>
-                <Switch>
-                    <Route path="/admin/:entity?" component={AppAdmin} />
-                    <Route
-                        exact
-                        path="/"
-                        render={() => <EnvironmentsRouter />}
-                    />
-                    <Route path="/:env/" component={EnvironmentsRouter} />
-                    <Route component={FourOhFour} />
-                </Switch>
+                <React.Suspense fallback={<Loading />}>
+                    <Switch>
+                        <Route path="/admin/:entity?" component={AppAdmin} />
+                        <Route
+                            exact
+                            path="/"
+                            render={() => <EnvironmentsRouter />}
+                        />
+                        <Route path="/:env/" component={EnvironmentsRouter} />
+                        <Route component={FourOhFour} />
+                    </Switch>
+                </React.Suspense>
             </AppLayout>
         </UserLoader>
         <ConfirmationManager />

diff --git a/querybook/webapp/components/DataDocSchemaNavigator/DataDocSchemaNavigator.tsx b/querybook/webapp/components/DataDocSchemaNavigator/DataDocSchemaNavigator.tsx
@@ -5,9 +5,9 @@ import { getCurrentEnv } from 'lib/utils/query-string';
 
 import { DataTableNavigator } from 'components/DataTableNavigator/DataTableNavigator';
 import { FullHeight } from 'ui/FullHeight/FullHeight';
-import './DataDocSchemaNavigator.scss';
 import { DataTableViewMini } from 'components/DataTableViewMini/DataTableViewMini';
 import { enableResizable } from 'lib/utils';
+import './DataDocSchemaNavigator.scss';
 
 export const DataDocSchemaNavigator: React.FunctionComponent = () => {
     const [tableId, setTableId] = React.useState<number>(null);

diff --git a/querybook/webapp/components/EmbeddedQueryPage/EmbeddedQueryPage.tsx b/querybook/webapp/components/EmbeddedQueryPage/EmbeddedQueryPage.tsx
@@ -1,15 +1,15 @@
 import React from 'react';
 import { useSelector, useDispatch } from 'react-redux';
 
-import { QueryComposer } from 'components/QueryComposer/QueryComposer';
+import QueryComposer from 'components/QueryComposer/QueryComposer';
 import { IAdhocQuery } from 'const/adhocQuery';
 import { IStoreState, Dispatch } from 'redux/store/types';
 import { receiveAdhocQuery } from 'redux/adhocQuery/action';
 import { FullHeight } from 'ui/FullHeight/FullHeight';
 import { Button } from 'ui/Button/Button';
 import './EmbeddedQueryPage.scss';
 
-export const EmbeddedQueryPage: React.FunctionComponent = () => {
+const EmbeddedQueryPage: React.FunctionComponent = () => {
     const environmentId = useSelector(
         (state: IStoreState) => state.environment.currentEnvironmentId
     );
@@ -71,3 +71,5 @@ export const EmbeddedQueryPage: React.FunctionComponent = () => {
         </FullHeight>
     );
 };
+
+export default EmbeddedQueryPage;
diff --git a/querybook/webapp/components/EnvironmentAppRouter/EnvironmentAppRouter.tsx b/querybook/webapp/components/EnvironmentAppRouter/EnvironmentAppRouter.tsx
@@ -5,14 +5,14 @@ import { useDispatch } from 'react-redux';
 import { IEnvironment } from 'redux/environment/types';
 import { loadQueryEngine } from 'redux/queryEngine/action';
 import { fetchQueryMetastore } from 'redux/dataSources/action';
+import { rehydrateAdhocQueryForEnvironment } from 'redux/adhocQuery/action';
 
 import { Loading } from 'ui/Loading/Loading';
 import { EnvironmentAppSidebar } from 'components/EnvironmentAppSidebar/EnvironmentAppSidebar';
 import { EnvironmentModalSwitchRouter } from 'components/EnvironmentAppRouter/EnvironmentModalSwitchRouter';
 import { FullHeight } from 'ui/FullHeight/FullHeight';
 
 import './EnvironmentAppRouter.scss';
-import { rehydrateAdhocQueryForEnvironment } from 'redux/adhocQuery/action';
 
 interface IProps {
     environment?: IEnvironment;

diff --git a/querybook/webapp/components/EnvironmentAppRouter/EnvironmentModalSwitchRouter.tsx b/querybook/webapp/components/EnvironmentAppRouter/EnvironmentModalSwitchRouter.tsx
@@ -4,20 +4,35 @@ import { Switch, Route, useHistory, useLocation } from 'react-router-dom';
 import { usePrevious } from 'hooks/usePrevious';
 import { useModalRoute } from 'hooks/useModalRoute';
 
-import { AppDataDoc } from 'components/AppDataDoc/AppDataDoc';
-import { BoardWrapper } from 'components/Board/BoardWrapper';
-import { EmbeddedQueryPage } from 'components/EmbeddedQueryPage/EmbeddedQueryPage';
-import { Landing } from 'components/Landing/Landing';
-import { QueryComposer } from 'components/QueryComposer/QueryComposer';
-import { QuerySnippetRoute } from 'components/QuerySnippetRoute/QuerySnippetRoute';
 import { FourOhFour } from 'ui/ErrorPage/FourOhFour';
+import { Loading } from 'ui/Loading/Loading';
+import { Modal } from 'ui/Modal/Modal';
 
-import { ChangeLogRoute } from './ChangeLogRoute';
-import { DataTableRoute } from './DataTableRoute';
-import { InfoMenuRoute } from './InfoMenuRoute';
-import { QueryExecutionRoute } from './QueryExecutionRoute';
-import { SearchRoute } from './SearchRoute';
-import { UserSettingsMenuRoute } from './UserSettingsMenuRoute';
+// Main Routes
+const Landing = React.lazy(() => import('components/Landing/Landing'));
+const DataDocRoute = React.lazy(() => import('./mainRoute/DataDocRoute'));
+const BoardRoute = React.lazy(() => import('./mainRoute/BoardRoute'));
+const EmbeddedQueryPage = React.lazy(() =>
+    import('components/EmbeddedQueryPage/EmbeddedQueryPage')
+);
+const QueryComposer = React.lazy(() =>
+    import('components/QueryComposer/QueryComposer')
+);
+
+// Modal Routes
+const QuerySnippetRoute = React.lazy(() =>
+    import('components/QuerySnippetRoute/QuerySnippetRoute')
+);
+const ChangeLogRoute = React.lazy(() => import('./modalRoute/ChangeLogRoute'));
+const DataTableRoute = React.lazy(() => import('./modalRoute/DataTableRoute'));
+const InfoMenuRoute = React.lazy(() => import('./modalRoute/InfoMenuRoute'));
+const QueryExecutionRoute = React.lazy(() =>
+    import('./modalRoute/QueryExecutionRoute')
+);
+const SearchRoute = React.lazy(() => import('./modalRoute/SearchRoute'));
+const UserSettingsMenuRoute = React.lazy(() =>
+    import('./modalRoute/UserSettingsMenuRoute')
+);
 
 export const EnvironmentModalSwitchRouter: React.FC = () => {
     const location = useLocation();
@@ -75,32 +90,46 @@ export const EnvironmentModalSwitchRouter: React.FC = () => {
         />,
     ];
 
-    const modalSwitch = needsToShowModal && <Switch>{modalRoutes}</Switch>;
+    const modalSwitch = needsToShowModal && (
+        <React.Suspense
+            fallback={
+                <Modal onHide={() => null}>
+                    <Loading />
+                </Modal>
+            }
+        >
+            <Switch>{modalRoutes}</Switch>
+        </React.Suspense>
+    );
     return (
         <>
-            <Switch
-                location={
-                    // Show lastNotModalLocation when a modal route is presented
-                    // In case we refresh the page (so lastNotModalLocation is null)
-                    // We show the root which is the 404 Page. Null is not passed because
-                    // Switch would use the current browser location instead
-                    needsToShowModal
-                        ? lastNotModalLocation ?? { pathname: '/' }
-                        : location
-                }
-            >
-                <Route path="/:env/" exact component={Landing} />
-                <Route path="/:env/datadoc/" component={AppDataDoc} />
-                <Route path="/:env/adhoc/" render={() => <QueryComposer />} />
-                <Route
-                    path="/:env/_/embedded_editor/"
-                    render={() => <EmbeddedQueryPage />}
-                />
-                <Route path="/:env/list/:boardId/" component={BoardWrapper} />
-                {modalRoutes}
-                <Route component={FourOhFour} />
-            </Switch>
-
+            <React.Suspense fallback={<Loading />}>
+                <Switch
+                    location={
+                        // Show lastNotModalLocation when a modal route is presented
+                        // In case we refresh the page (so lastNotModalLocation is null)
+                        // We show the root which is the 404 Page. Null is not passed because
+                        // Switch would use the current browser location instead
+                        needsToShowModal
+                            ? lastNotModalLocation ?? { pathname: '/' }
+                            : location
+                    }
+                >
+                    <Route path="/:env/" exact component={Landing} />
+                    <Route path="/:env/datadoc/" component={DataDocRoute} />
+                    <Route
+                        path="/:env/adhoc/"
+                        render={() => <QueryComposer />}
+                    />
+                    <Route
+                        path="/:env/_/embedded_editor/"
+                        render={() => <EmbeddedQueryPage />}
+                    />
+                    <Route path="/:env/list/:boardId/" component={BoardRoute} />
+                    {modalRoutes}
+                    <Route component={FourOhFour} />
+                </Switch>
+            </React.Suspense>
             {modalSwitch}
         </>
     );

diff --git a/.../webapp/components/Board/BoardWrapper.tsx → ...ronmentAppRouter/mainRoute/BoardRoute.tsx b/.../webapp/components/Board/BoardWrapper.tsx → ...ronmentAppRouter/mainRoute/BoardRoute.tsx
@@ -1,11 +1,13 @@
 import React from 'react';
 import { RouteComponentProps } from 'react-router-dom';
 
-import { Board } from './Board';
+import { Board } from 'components/Board/Board';
 
-export const BoardWrapper: React.FunctionComponent<RouteComponentProps> = ({
+const BoardRoute: React.FunctionComponent<RouteComponentProps> = ({
     match,
 }) => {
     const boardId = Number(match.params['boardId']);
     return <Board boardId={boardId} />;
 };
+
+export default BoardRoute;
diff --git a/...bapp/components/AppDataDoc/AppDataDoc.tsx → ...nmentAppRouter/mainRoute/DataDocRoute.tsx b/...bapp/components/AppDataDoc/AppDataDoc.tsx → ...nmentAppRouter/mainRoute/DataDocRoute.tsx
@@ -1,15 +1,18 @@
 import React from 'react';
-import { Route, Switch, RouteComponentProps } from 'react-router-dom';
+import { Route, Switch, RouteComponentProps, Redirect } from 'react-router-dom';
 
 import { DataDocWrapper } from 'components/DataDoc/DataDocWrapper';
-import { Landing } from 'components/Landing/Landing';
 
 import { FourOhFour } from 'ui/ErrorPage/FourOhFour';
 
-export const AppDataDoc: React.FunctionComponent<RouteComponentProps> = () => (
+const DataDocRoute: React.FunctionComponent<RouteComponentProps> = () => (
     <Switch>
         <Route path="/:env/datadoc/:docId/" component={DataDocWrapper} />
-        <Route path="/:env/datadoc/" exact={true} component={Landing} />
+        <Route path="/:env/datadoc/" exact={true}>
+            <Redirect to="/" />
+        </Route>
         <Route component={FourOhFour} />
     </Switch>
 );
+
+export default DataDocRoute;
diff --git a/...s/EnvironmentAppRouter/ChangeLogRoute.tsx → ...ntAppRouter/modalRoute/ChangeLogRoute.tsx b/...s/EnvironmentAppRouter/ChangeLogRoute.tsx → ...ntAppRouter/modalRoute/ChangeLogRoute.tsx
@@ -13,7 +13,7 @@ import { ChangeLog } from 'components/ChangeLog/ChangeLog';
 
 import { Modal } from 'ui/Modal/Modal';
 
-export const ChangeLogRoute: React.FunctionComponent<RouteComponentProps> = ({
+const ChangeLogRoute: React.FunctionComponent<RouteComponentProps> = ({
     location,
 }) => {
     useBrowserTitle('Change Log');
@@ -37,3 +37,5 @@ export const ChangeLogRoute: React.FunctionComponent<RouteComponentProps> = ({
         </div>
     );
 };
+
+export default ChangeLogRoute;
diff --git a/...s/EnvironmentAppRouter/DataTableRoute.tsx → ...ntAppRouter/modalRoute/DataTableRoute.tsx b/...s/EnvironmentAppRouter/DataTableRoute.tsx → ...ntAppRouter/modalRoute/DataTableRoute.tsx
@@ -6,7 +6,7 @@ import { DataTableView } from 'components/DataTableView/DataTableView';
 import { Modal } from 'ui/Modal/Modal';
 import { useModalRoute } from 'hooks/useModalRoute';
 
-export const DataTableRoute: React.FunctionComponent<RouteComponentProps> = ({
+const DataTableRoute: React.FunctionComponent<RouteComponentProps> = ({
     match,
     location,
 }) => {
@@ -26,3 +26,5 @@ export const DataTableRoute: React.FunctionComponent<RouteComponentProps> = ({
         contentDOM
     );
 };
+
+export default DataTableRoute;
diff --git a/...ts/EnvironmentAppRouter/InfoMenuRoute.tsx → ...entAppRouter/modalRoute/InfoMenuRoute.tsx b/...ts/EnvironmentAppRouter/InfoMenuRoute.tsx → ...entAppRouter/modalRoute/InfoMenuRoute.tsx
@@ -12,7 +12,7 @@ import { Tours } from 'components/Info/Tours';
 
 import { Modal } from 'ui/Modal/Modal';
 
-export const InfoMenuRoute: React.FunctionComponent<RouteComponentProps> = ({
+const InfoMenuRoute: React.FunctionComponent<RouteComponentProps> = ({
     location,
 }) => {
     useBrowserTitle('Info');
@@ -47,3 +47,5 @@ export const InfoMenuRoute: React.FunctionComponent<RouteComponentProps> = ({
         <div className="InfoMenuRoute m24">{getContentDOM()}</div>
     );
 };
+
+export default InfoMenuRoute;
diff --git a/...ironmentAppRouter/QueryExecutionRoute.tsx → ...Router/modalRoute/QueryExecutionRoute.tsx b/...ironmentAppRouter/QueryExecutionRoute.tsx → ...Router/modalRoute/QueryExecutionRoute.tsx
@@ -7,7 +7,7 @@ import { Modal } from 'ui/Modal/Modal';
 import { QueryView } from 'components/QueryView/QueryView';
 import { useBrowserTitle } from 'hooks/useBrowserTitle';
 
-export const QueryExecutionRoute: React.FunctionComponent<RouteComponentProps> = ({
+const QueryExecutionRoute: React.FunctionComponent<RouteComponentProps> = ({
     location,
     match,
 }) => {
@@ -24,3 +24,5 @@ export const QueryExecutionRoute: React.FunctionComponent<RouteComponentProps> =
         contentDOM
     );
 };
+
+export default QueryExecutionRoute;
diff --git a/...ents/EnvironmentAppRouter/SearchRoute.tsx → ...nmentAppRouter/modalRoute/SearchRoute.tsx b/...ents/EnvironmentAppRouter/SearchRoute.tsx → ...nmentAppRouter/modalRoute/SearchRoute.tsx
@@ -10,7 +10,7 @@ import { useModalRoute } from 'hooks/useModalRoute';
 import { SearchOverview } from 'components/Search/SearchOverview';
 import { Modal } from 'ui/Modal/Modal';
 
-export const SearchRoute: React.FunctionComponent<RouteComponentProps> = ({
+const SearchRoute: React.FunctionComponent<RouteComponentProps> = ({
     location,
 }) => {
     useBrowserTitle('Search');
@@ -42,3 +42,5 @@ export const SearchRoute: React.FunctionComponent<RouteComponentProps> = ({
         contentDOM
     );
 };
+
+export default SearchRoute;
diff --git a/...onmentAppRouter/UserSettingsMenuRoute.tsx → ...uter/modalRoute/UserSettingsMenuRoute.tsx b/...onmentAppRouter/UserSettingsMenuRoute.tsx → ...uter/modalRoute/UserSettingsMenuRoute.tsx
@@ -8,7 +8,7 @@ import { useBrowserTitle } from 'hooks/useBrowserTitle';
 import { useModalRoute } from 'hooks/useModalRoute';
 import { UserSettingsMenu } from 'components/UserSettingsMenu/UserSettingsMenu';
 
-export const UserSettingsMenuRoute: React.FunctionComponent<RouteComponentProps> = ({
+const UserSettingsMenuRoute: React.FunctionComponent<RouteComponentProps> = ({
     location,
 }) => {
     useBrowserTitle('User Settings');
@@ -27,3 +27,5 @@ export const UserSettingsMenuRoute: React.FunctionComponent<RouteComponentProps>
         </Modal>
     );
 };
+
+export default UserSettingsMenuRoute;
diff --git a/querybook/webapp/components/EnvironmentAppSidebar/EnvironmentAppSidebar.tsx b/querybook/webapp/components/EnvironmentAppSidebar/EnvironmentAppSidebar.tsx
@@ -13,10 +13,10 @@ import { Icon } from 'ui/Icon/Icon';
 import { Entity } from './types';
 import { EnvironmentTopbar } from './EnvironmentTopbar';
 import { EntitySidebar } from './EntitySidebar';
-import './EnvironmentAppSidebar.scss';
 import { EnvironmentDropdownButton } from './EnvironmentDropdownButton';
 import { useEvent } from 'hooks/useEvent';
 import { matchKeyMap, KeyMap } from 'lib/utils/keyboard';
+import './EnvironmentAppSidebar.scss';
 
 const SIDEBAR_WIDTH = 320;
 

diff --git a/querybook/webapp/components/EnvironmentsRouter/EnvironmentsRouter.tsx b/querybook/webapp/components/EnvironmentsRouter/EnvironmentsRouter.tsx
@@ -217,6 +217,6 @@ function mapDispatchToProps(dispatch: Dispatch) {
     };
 }
 
-export const EnvironmentsRouter = withRouter(
+export default withRouter(
     connect(mapStateToProps, mapDispatchToProps)(EnvironmentsRouterComponent)
 );
diff --git a/querybook/webapp/components/Landing/Landing.tsx b/querybook/webapp/components/Landing/Landing.tsx
@@ -131,7 +131,7 @@ const DefaultLanding: React.FC = ({ children }) => {
     );
 };
 
-export const Landing: React.FC = () => {
+const Landing: React.FC = () => {
     useBrowserTitle();
 
     const customLandingConfig = window.CUSTOM_LANDING_PAGE;
@@ -141,3 +141,5 @@ export const Landing: React.FC = () => {
 
     return <DefaultLanding>{customLandingConfig?.renderer()}</DefaultLanding>;
 };
+
+export default Landing;