interface: more code-splitting, removing unused dep

pkg/interface/.gitignore

@@ -6,6 +6,7 @@ yarn-debug.log*
 yarn-error.log*
 *.swp
 .DS_Store
+stats.json
 
 # Runtime data
 pids

pkg/interface/package.json

@@ -84,7 +84,6 @@
     "@typescript-eslint/eslint-plugin": "^4.15.0",
     "@typescript-eslint/parser": "^4.24.0",
     "@urbit/eslint-config": "^1.0.0",
-    "@welldone-software/why-did-you-render": "^6.1.0",
     "babel-eslint": "^10.1.0",
     "babel-jest": "^26.6.3",
     "babel-loader": "^8.2.2",
@@ -119,6 +118,7 @@
     "tsc:watch": "tsc --watch",
     "build:dev": "cross-env NODE_ENV=development webpack --config config/webpack.dev.js",
     "build:prod": "cross-env NODE_ENV=production webpack --config config/webpack.prod.js",
+    "build:profile": "cross-env NODE_ENV=production webpack --config config/webpack.prod.js --profile --json > stats.json",
     "start": "webpack-dev-server --config config/webpack.dev.js",
     "test": "tsc && jest",
     "jest": "jest",

pkg/interface/src/index.js

@@ -2,6 +2,5 @@ import * as React from 'react';
 import * as ReactDOM from 'react-dom';
 import './register-sw';
 import App from './views/App';
-import './wdyr';
 
 ReactDOM.render(<App />, document.getElementById('root'));

pkg/interface/src/views/landscape/components/Content.tsx

@@ -6,6 +6,7 @@ import { useLocalStorageState } from '~/logic/lib/useLocalStorageState';
 import { PermalinkRoutes } from '~/views/apps/permalinks/app';
 import { useShortcut } from '~/logic/state/settings';
 import { Loading } from '~/views/components/Loading';
+import LaunchApp from '~/views/apps/launch/App';
 
 export const Container = styled(Box)`
    flex-grow: 1;
@@ -15,7 +16,6 @@ export const Container = styled(Box)`
 `;
 
 const Landscape = React.lazy(() => import('~/views/landscape/index'));
-const LaunchApp = React.lazy(() => import('~/views/apps/launch/App'));
 const Settings = React.lazy(() => import('~/views/apps/settings/settings'));
 const Profile = React.lazy(() => import('~/views/apps/profile/profile'));
 const Notifications = React.lazy(() => import('~/views/apps/notifications/notifications'));

pkg/interface/src/views/landscape/components/GroupsPane.tsx

@@ -12,26 +12,27 @@ import { getGroupFromWorkspace } from '~/logic/lib/workspace';
 import useGroupState from '~/logic/state/group';
 import useHarkState from '~/logic/state/hark';
 import useMetadataState from '~/logic/state/metadata';
-import { DmResource } from '~/views/apps/chat/DmResource';
 import { Workspace } from '~/types/workspace';
 import '~/views/apps/links/css/custom.css';
 import '~/views/apps/publish/css/custom.css';
 import { Loading } from '~/views/components/Loading';
-import { UnjoinedResource } from '~/views/components/UnjoinedResource';
-import { EmptyGroupHome } from './Home/EmptyGroupHome';
-import { GroupHome } from './Home/GroupHome';
 import { InvitePopover } from './InvitePopover';
-import { NewChannel } from './NewChannel';
 import { PopoverRoutes } from './PopoverRoutes';
-import { Resource } from './Resource';
 import { Skeleton } from './Skeleton';
 import airlock from '~/logic/api';
+import { EmptyGroupHome } from './Home/EmptyGroupHome';
 
 interface GroupsPaneProps {
   baseUrl: string;
   workspace: Workspace;
 }
 
+const DmResource = React.lazy(() => import('~/views/apps/chat/DmResource').then(module => ({ default: module.DmResource })));
+const Resource = React.lazy(() => import('./Resource').then(module => ({ default: module.Resource })));
+const UnjoinedResource = React.lazy(() => import('~/views/components/UnjoinedResource').then(module => ({ default: module.UnjoinedResource })));
+const GroupHome = React.lazy(() => import('./Home/GroupHome').then(module => ({ default: module.GroupHome })));
+const NewChannel = React.lazy(() => import('./NewChannel').then(module => ({ default: module.NewChannel })));
+
 export function GroupsPane(props: GroupsPaneProps) {
   const { baseUrl, workspace } = props;
   const associations = useMetadataState(state => state.associations);

pkg/interface/src/views/landscape/components/Skeleton.tsx

@@ -1,9 +1,10 @@
-import React, { ReactElement, ReactNode, useCallback, useState } from 'react';
+import React, { ReactElement, ReactNode, Suspense, useCallback, useState } from 'react';
 import { Sidebar } from './Sidebar/Sidebar';
 import { Workspace } from '~/types/workspace';
 import { Body } from '~/views/components/Body';
 import ErrorBoundary from '~/views/components/ErrorBoundary';
 import { useShortcut } from '~/logic/state/settings';
+import { Loading } from '~/views/components/Loading';
 
 interface SkeletonProps {
   children: ReactNode;
@@ -41,7 +42,7 @@ export const Skeleton = React.memo((props: SkeletonProps): ReactElement => {
           />
         )}
       </ErrorBoundary>
-      {props.children}
+      <Suspense fallback={Loading}>{props.children}</Suspense>
     </Body>
   );
 });

pkg/interface/src/views/landscape/index.tsx

@@ -7,11 +7,12 @@ import useHarkState from '~/logic/state/hark';
 import { Workspace } from '~/types/workspace';
 import { Body } from '../components/Body';
 import { GroupsPane } from './components/GroupsPane';
-import { JoinGroup } from './components/JoinGroup';
-import { NewGroup } from './components/NewGroup';
 import './css/custom.css';
 import _ from 'lodash';
 
+const NewGroup = React.lazy(() => import('./components/NewGroup').then(module => ({ default: module.NewGroup })));
+const JoinGroup = React.lazy(() => import('./components/JoinGroup').then(module => ({ default: module.JoinGroup })));
+
 moment.updateLocale('en', {
   relativeTime : {
     future: '%s',

pkg/interface/src/wdyr.js

@@ -1,8 +0,0 @@
-import React from 'react';
-
-if (false && process.env.NODE_ENV === 'development') {
-  const whyDidYouRender = require('@welldone-software/why-did-you-render');
-  whyDidYouRender(React, {
-    trackAllPureComponents: true
-  });
-}