Fix lazing loading (#2192)

Automattic · Jul 8, 2020 · 69334e1 · 69334e1
1 parent e1974d7
commit 69334e1
Showing 1 changed file with 36 additions and 21 deletions.
diff --git a/lib/app-layout/index.tsx b/lib/app-layout/index.tsx
@@ -2,9 +2,6 @@ import React, { Component, Suspense } from 'react';
 import classNames from 'classnames';
 import { connect } from 'react-redux';
 
-import NoteList from '../note-list';
-import NoteEditor from '../note-editor';
-
 import NoteToolbarContainer from '../note-toolbar-container';
 import NoteToolbar from '../note-toolbar';
 import RevisionSelector from '../revision-selector';
@@ -16,6 +13,14 @@ import actions from '../state/actions';
 import * as S from '../state';
 import * as T from '../types';
 
+const NoteList = React.lazy(() =>
+  import(/* webpackChunkName: 'note-list' */ '../note-list')
+);
+
+const NoteEditor = React.lazy(() =>
+  import(/* webpackChunkName: 'note-editor' */ '../note-editor')
+);
+
 type OwnProps = {
   isFocusMode: boolean;
   isNavigationOpen: boolean;
@@ -95,27 +100,37 @@ export class AppLayout extends Component<Props> {
 
     const editorVisible = !(showNoteList && isSmallScreen);
 
+    const placeholder = (
+      <TransitionDelayEnter delay={1000}>
+        <div className="app-layout__placeholder">
+          <SimplenoteCompactLogo />
+        </div>
+      </TransitionDelayEnter>
+    );
+
     return (
       <div className={mainClasses}>
-        <div className="app-layout__source-column theme-color-bg theme-color-fg">
-          <SearchBar noteBucket={noteBucket} />
-          <NoteList noteBucket={noteBucket} isSmallScreen={isSmallScreen} />
-        </div>
-        {editorVisible && (
-          <div className="app-layout__note-column theme-color-bg theme-color-fg theme-color-border">
-            <RevisionSelector onUpdateContent={onUpdateContent} />
-            <NoteToolbarContainer
-              noteBucket={noteBucket}
-              toolbar={<NoteToolbar />}
-            />
-            <NoteEditor
-              isSmallScreen={isSmallScreen}
-              noteBucket={noteBucket}
-              onUpdateContent={onUpdateContent}
-              syncNote={syncNote}
-            />
+        <Suspense fallback={placeholder}>
+          <div className="app-layout__source-column theme-color-bg theme-color-fg">
+            <SearchBar noteBucket={noteBucket} />
+            <NoteList noteBucket={noteBucket} isSmallScreen={isSmallScreen} />
           </div>
-        )}
+          {editorVisible && (
+            <div className="app-layout__note-column theme-color-bg theme-color-fg theme-color-border">
+              <RevisionSelector onUpdateContent={onUpdateContent} />
+              <NoteToolbarContainer
+                noteBucket={noteBucket}
+                toolbar={<NoteToolbar />}
+              />
+              <NoteEditor
+                isSmallScreen={isSmallScreen}
+                noteBucket={noteBucket}
+                onUpdateContent={onUpdateContent}
+                syncNote={syncNote}
+              />
+            </div>
+          )}
+        </Suspense>
       </div>
     );
   };