[MM-59299] Investigate further breaking down chunks of components/nod…

…e_modules for initial load (mattermost#27845)
BrandonS09 · Sep 4, 2024 · 7232fee · 7232fee
1 parent e104575
commit 7232fee
Show file tree

Hide file tree

Showing 19 changed files with 213 additions and 191 deletions.
diff --git a/webapp/channels/src/components/__snapshots__/file_upload_overlay.test.tsx.snap b/webapp/channels/src/components/__snapshots__/file_upload_overlay.test.tsx.snap
@@ -13,6 +13,7 @@ exports[`components/FileUploadOverlay should match snapshot when file upload is
       <img
         alt="Files"
         className="overlay__files"
+        loading="lazy"
         src=""
       />
       <span>
@@ -28,6 +29,7 @@ exports[`components/FileUploadOverlay should match snapshot when file upload is
       <img
         alt="Logo"
         className="overlay__logo"
+        loading="lazy"
         src=""
       />
     </div>
@@ -48,6 +50,7 @@ exports[`components/FileUploadOverlay should match snapshot when file upload is
       <img
         alt="Files"
         className="overlay__files"
+        loading="lazy"
         src=""
       />
       <span>
@@ -63,6 +66,7 @@ exports[`components/FileUploadOverlay should match snapshot when file upload is
       <img
         alt="Logo"
         className="overlay__logo"
+        loading="lazy"
         src=""
       />
     </div>
@@ -83,6 +87,7 @@ exports[`components/FileUploadOverlay should match snapshot when file upload is
       <img
         alt="Files"
         className="overlay__files"
+        loading="lazy"
         src=""
       />
       <span>
@@ -98,6 +103,7 @@ exports[`components/FileUploadOverlay should match snapshot when file upload is
       <img
         alt="Logo"
         className="overlay__logo"
+        loading="lazy"
         src=""
       />
     </div>

diff --git a/webapp/channels/src/components/advanced_text_editor/advanced_text_editor.tsx b/webapp/channels/src/components/advanced_text_editor/advanced_text_editor.tsx
@@ -2,7 +2,7 @@
 // See LICENSE.txt for license information.
 
 import classNames from 'classnames';
-import React, {useCallback, useEffect, useMemo, useRef, useState} from 'react';
+import React, {lazy, useCallback, useEffect, useMemo, useRef, useState} from 'react';
 import {FormattedMessage, useIntl} from 'react-intl';
 import {useDispatch, useSelector} from 'react-redux';
 
@@ -24,9 +24,9 @@ import {makeGetDraft} from 'selectors/rhs';
 import {connectionErrorCount} from 'selectors/views/system';
 import LocalStorageStore from 'stores/local_storage_store';
 
+import {makeAsyncComponent} from 'components/async_load';
 import AutoHeightSwitcher from 'components/common/auto_height_switcher';
 import useDidUpdate from 'components/common/hooks/useDidUpdate';
-import FileLimitStickyBanner from 'components/file_limit_sticky_banner';
 import MessageSubmitError from 'components/message_submit_error';
 import MsgTyping from 'components/msg_typing';
 import RhsSuggestionList from 'components/suggestion/rhs_suggestion_list';
@@ -66,6 +66,8 @@ import useUploadFiles from './use_upload_files';
 
 import './advanced_text_editor.scss';
 
+const FileLimitStickyBanner = makeAsyncComponent('FileLimitStickyBanner', lazy(() => import('components/file_limit_sticky_banner')));
+
 function isDraftEmpty(draft: PostDraft) {
     return draft.message === '' && draft.fileInfos.length === 0 && draft.uploadsInProgress.length === 0;
 }

diff --git a/webapp/channels/src/components/app.tsx b/webapp/channels/src/components/app.tsx
@@ -1,7 +1,7 @@
 // Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
 // See LICENSE.txt for license information.
 
-import React from 'react';
+import React, {lazy} from 'react';
 import {hot} from 'react-hot-loader/root';
 import {Provider} from 'react-redux';
 import {Router} from 'react-router-dom';
@@ -11,7 +11,7 @@ import store from 'stores/redux_store';
 import {makeAsyncComponent} from 'components/async_load';
 
 import {getHistory} from 'utils/browser_history';
-const LazyRoot = React.lazy(() => import('components/root'));
+const LazyRoot = lazy(() => import('components/root'));
 
 const Root = makeAsyncComponent('Root', LazyRoot);
 

diff --git a/webapp/channels/src/components/channel_layout/center_channel/center_channel.tsx b/webapp/channels/src/components/channel_layout/center_channel/center_channel.tsx
@@ -2,43 +2,34 @@
 // See LICENSE.txt for license information.
 
 import classNames from 'classnames';
-import React from 'react';
+import React, {lazy} from 'react';
 import {Route, Switch, Redirect} from 'react-router-dom';
 
 import {makeAsyncComponent} from 'components/async_load';
 import ChannelIdentifierRouter from 'components/channel_layout/channel_identifier_router';
-import PlaybookRunner from 'components/channel_layout/playbook_runner';
 import LoadingScreen from 'components/loading_screen';
-import PermalinkView from 'components/permalink_view';
 
 import {IDENTIFIER_PATH_PATTERN, ID_PATH_PATTERN, TEAM_NAME_PATH_PATTERN} from 'utils/path';
 
 import type {OwnProps, PropsFromRedux} from './index';
 
-const LazyChannelHeaderMobile = makeAsyncComponent(
-    'LazyChannelHeaderMobile',
-    React.lazy(() => import('components/channel_header_mobile')),
-);
-
-const LazyGlobalThreads = makeAsyncComponent(
-    'LazyGlobalThreads',
-    React.lazy(() => import('components/threading/global_threads')),
+const ChannelHeaderMobile = makeAsyncComponent('ChannelHeaderMobile', lazy(() => import('components/channel_header_mobile')));
+const GlobalThreads = makeAsyncComponent('GlobalThreads', lazy(() => import('components/threading/global_threads')),
     (
         <div className='app__content'>
             <LoadingScreen/>
         </div>
     ),
 );
-
-const LazyDrafts = makeAsyncComponent(
-    'LazyDrafts',
-    React.lazy(() => import('components/drafts')),
+const Drafts = makeAsyncComponent('Drafts', lazy(() => import('components/drafts')),
     (
         <div className='app__content'>
             <LoadingScreen/>
         </div>
     ),
 );
+const PermalinkView = makeAsyncComponent('PermalinkView', lazy(() => import('components/permalink_view')));
+const PlaybookRunner = makeAsyncComponent('PlaybookRunner', lazy(() => import('components/channel_layout/playbook_runner')));
 
 type Props = PropsFromRedux & OwnProps;
 
@@ -85,11 +76,13 @@ export default class CenterChannel extends React.PureComponent<Props, State> {
                 })}
             >
                 {isMobileView && (
-                    <div className='row header'>
-                        <div id='navbar_wrapper'>
-                            <LazyChannelHeaderMobile/>
+                    <>
+                        <div className='row header'>
+                            <div id='navbar_wrapper'>
+                                <ChannelHeaderMobile/>
+                            </div>
                         </div>
-                    </div>
+                    </>
                 )}
                 <div className='row main'>
                     <Switch>
@@ -114,12 +107,12 @@ export default class CenterChannel extends React.PureComponent<Props, State> {
                         {isCollapsedThreadsEnabled ? (
                             <Route
                                 path={`/:team(${TEAM_NAME_PATH_PATTERN})/threads/:threadIdentifier(${ID_PATH_PATTERN})?`}
-                                component={LazyGlobalThreads}
+                                component={GlobalThreads}
                             />
                         ) : null}
                         <Route
                             path={`/:team(${TEAM_NAME_PATH_PATTERN})/drafts`}
-                            component={LazyDrafts}
+                            component={Drafts}
                         />
 
                         <Redirect to={lastChannelPath}/>

diff --git a/webapp/channels/src/components/channel_layout/channel_controller.tsx b/webapp/channels/src/components/channel_layout/channel_controller.tsx
@@ -2,18 +2,17 @@
 // See LICENSE.txt for license information.
 
 import classNames from 'classnames';
-import React, {useEffect} from 'react';
+import React, {lazy, useEffect} from 'react';
 import {useDispatch, useSelector} from 'react-redux';
 
 import {cleanUpStatusAndProfileFetchingPoll} from 'mattermost-redux/actions/status_profile_polling';
 import {getIsUserStatusesConfigEnabled} from 'mattermost-redux/selectors/entities/common';
 
 import {addVisibleUsersInCurrentChannelToStatusPoll} from 'actions/status_actions';
 
+import {makeAsyncComponent} from 'components/async_load';
 import CenterChannel from 'components/channel_layout/center_channel';
 import LoadingScreen from 'components/loading_screen';
-import ProductNoticesModal from 'components/product_notices_modal';
-import ResetStatusModal from 'components/reset_status_modal';
 import Sidebar from 'components/sidebar';
 import CRTPostsChannelResetWatcher from 'components/threading/channel_threads/posts_channel_reset_watcher';
 import UnreadsStatusHandler from 'components/unreads_status_handler';
@@ -22,6 +21,9 @@ import Pluggable from 'plugins/pluggable';
 import {Constants} from 'utils/constants';
 import {isInternetExplorer, isEdge} from 'utils/user_agent';
 
+const ProductNoticesModal = makeAsyncComponent('ProductNoticesModal', lazy(() => import('components/product_notices_modal')));
+const ResetStatusModal = makeAsyncComponent('ResetStatusModal', lazy(() => import('components/reset_status_modal')));
+
 const BODY_CLASS_FOR_CHANNEL = ['app__body', 'channel-view'];
 
 type Props = {

diff --git a/webapp/channels/src/components/channel_view/__snapshots__/channel_view.test.tsx.snap b/webapp/channels/src/components/channel_view/__snapshots__/channel_view.test.tsx.snap
@@ -8,7 +8,7 @@ exports[`components/channel_view Should match snapshot if channel is archived 1`
   <FileUploadOverlay
     overlayType="center"
   />
-  <withRouter(Connect(injectIntl(ChannelHeader)))
+  <ChannelHeader
     channelId="channelId"
     channelIsArchived={true}
     deactivatedChannel={false}
@@ -66,7 +66,7 @@ exports[`components/channel_view Should match snapshot if channel is deactivated
   <FileUploadOverlay
     overlayType="center"
   />
-  <withRouter(Connect(injectIntl(ChannelHeader)))
+  <ChannelHeader
     channelId="channelId"
     channelIsArchived={false}
     deactivatedChannel={true}
@@ -123,7 +123,7 @@ exports[`components/channel_view Should match snapshot with base props 1`] = `
   <FileUploadOverlay
     overlayType="center"
   />
-  <withRouter(Connect(injectIntl(ChannelHeader)))
+  <ChannelHeader
     channelId="channelId"
     channelIsArchived={false}
     deactivatedChannel={false}
@@ -152,7 +152,7 @@ exports[`components/channel_view Should match snapshot with base props 1`] = `
     data-testid="post-create"
     id="post-create"
   >
-    <Memo(AdvancedCreatePost) />
+    <AdvancedCreatePost />
   </div>
 </div>
 `;
diff --git a/webapp/channels/src/components/channel_view/channel_view.tsx b/webapp/channels/src/components/channel_view/channel_view.tsx
@@ -1,22 +1,24 @@
 // Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
 // See LICENSE.txt for license information.
 
-import React from 'react';
+import React, {lazy} from 'react';
 import {FormattedMessage} from 'react-intl';
 import type {RouteComponentProps} from 'react-router-dom';
 
-import AdvancedCreatePost from 'components/advanced_create_post';
-import ChannelBookmarks from 'components/channel_bookmarks';
-import ChannelHeader from 'components/channel_header';
+import {makeAsyncComponent} from 'components/async_load';
 import deferComponentRender from 'components/deferComponentRender';
-import FileUploadOverlay from 'components/file_upload_overlay';
 import FormattedMarkdownMessage from 'components/formatted_markdown_message';
 import PostView from 'components/post_view';
 
 import WebSocketClient from 'client/web_websocket_client';
 
 import type {PropsFromRedux} from './index';
 
+const ChannelHeader = makeAsyncComponent('ChannelHeader', lazy(() => import('components/channel_header')));
+const FileUploadOverlay = makeAsyncComponent('FileUploadOverlay', lazy(() => import('components/file_upload_overlay')));
+const ChannelBookmarks = makeAsyncComponent('ChannelBookmarks', lazy(() => import('components/channel_bookmarks')));
+const AdvancedCreatePost = makeAsyncComponent('AdvancedCreatePost', lazy(() => import('components/advanced_create_post')));
+
 export type Props = PropsFromRedux & RouteComponentProps<{
     postid?: string;
 }>;

diff --git a/webapp/channels/src/components/file_upload_overlay.tsx b/webapp/channels/src/components/file_upload_overlay.tsx
@@ -29,6 +29,7 @@ const FileUploadOverlay = (props: Props) => {
                         className='overlay__files'
                         src={fileOverlayImage}
                         alt='Files'
+                        loading='lazy'
                     />
                     <span>
                         <i
@@ -44,6 +45,7 @@ const FileUploadOverlay = (props: Props) => {
                         className='overlay__logo'
                         src={overlayLogoImage}
                         alt='Logo'
+                        loading='lazy'
                     />
                 </div>
             </div>

diff --git a/webapp/channels/src/components/logged_in_route/index.tsx b/webapp/channels/src/components/logged_in_route/index.tsx
@@ -0,0 +1,40 @@
+// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
+// See LICENSE.txt for license information.
+
+import React, {lazy} from 'react';
+import type {RouteComponentProps} from 'react-router-dom';
+import {Route} from 'react-router-dom';
+
+import type {Theme} from 'mattermost-redux/selectors/entities/preferences';
+
+import {makeAsyncComponent} from 'components/async_load';
+import CompassThemeProvider from 'components/compass_theme_provider/compass_theme_provider';
+import LoggedIn from 'components/logged_in';
+
+const OnBoardingTaskList = makeAsyncComponent('OnboardingTaskList', lazy(() => import('components/onboarding_tasklist')));
+
+type Props = {
+    component: React.ComponentType<RouteComponentProps<any>>;
+    path: string | string[];
+    theme?: Theme; // the routes that send the theme are the ones that will actually need to show the onboarding tasklist
+};
+
+export default function LoggedInRoute(props: Props) {
+    const {component: Component, theme, ...rest} = props;
+
+    return (
+        <Route
+            {...rest}
+            render={(routeProps) => (
+                <LoggedIn {...routeProps}>
+                    {theme && (
+                        <CompassThemeProvider theme={theme}>
+                            <OnBoardingTaskList/>
+                        </CompassThemeProvider>
+                    )}
+                    <Component {...(routeProps)}/>
+                </LoggedIn>
+            )}
+        />
+    );
+}