interface: more code-splitting, removing unused dep

This commit is contained in:
Hunter Miller 2021-10-14 09:28:21 -05:00
parent b73def0a3f
commit 4c34a1b80c
8 changed files with 16 additions and 21 deletions

View File

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

View File

@ -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",

View File

@ -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'));

View File

@ -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'));

View File

@ -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);

View File

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

View File

@ -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',

View File

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