From ec0baf7ef39038c74a750dafee134f35d82ade2a Mon Sep 17 00:00:00 2001
From: Tony Pai <tony77794@gmail.com>
Date: Thu, 25 Oct 2018 15:37:30 +0800
Subject: [PATCH] Add partially rendering example

---
 src/App.css |  2 +-
 src/App.js  | 15 +++++++++++++--
 2 files changed, 14 insertions(+), 3 deletions(-)

diff --git a/src/App.css b/src/App.css
index 92f956e..a21f73e 100644
--- a/src/App.css
+++ b/src/App.css
@@ -11,7 +11,7 @@
   background-color: #282c34;
   min-height: 100vh;
   display: flex;
-  flex-direction: column;
+  flex-direction: row;
   align-items: center;
   justify-content: center;
   font-size: calc(10px + 2vmin);
diff --git a/src/App.js b/src/App.js
index 80940c7..11e6e48 100644
--- a/src/App.js
+++ b/src/App.js
@@ -1,4 +1,4 @@
-import React, { Component, Suspense, lazy, memo } from "react";
+import React, { Component, Suspense, lazy, memo, Fragment } from "react";
 import "./App.css";
 
 const sleep = ms => new Promise(r => setTimeout(r, ms));
@@ -8,6 +8,11 @@ const Logo = lazy(async () => {
   return import("./logo.js");
 });
 
+const LargeLogo = lazy(async () => {
+  await sleep(3000);
+  return import("./logo.js");
+});
+
 const Placeholder = memo(() => <strong>Loading...</strong>);
 
 class App extends Component {
@@ -21,9 +26,15 @@ class App extends Component {
   render() {
     return (
       <div className="App">
+        <input type="text" />
         <header className="App-header">
           <Suspense maxDuration={300} fallback={<Placeholder />}>
-            <Logo alt={this.state.alt} />
+            <Fragment>
+              <Logo alt={this.state.alt} />
+              <Suspense maxDuration={1500} fallback={<Placeholder />}>
+                <LargeLogo alt={this.state.alt} />
+              </Suspense>
+            </Fragment>
           </Suspense>
         </header>
       </div>