Skip to content

Commit 111f72d

Browse files
sebmarkbagesebmarkbage
committed
Add fixture example
1 parent 57818ae commit 111f72d

File tree

2 files changed

+250
-1
lines changed

2 files changed

+250
-1
lines changed

‎fixtures/ssr/src/components/Chrome.js

Lines changed: 7 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,8 @@ import Theme, {ThemeToggleButton} from './Theme';
44

55
import './Chrome.css';
66

7+
import LargeContent from './LargeContent';
8+
79
export default class Chrome extends Component {
810
state = {theme: 'light'};
911
render() {
@@ -25,7 +27,6 @@ export default class Chrome extends Component {
2527
/>
2628
<Suspense fallback="Loading...">
2729
<Theme.Provider value={this.state.theme}>
28-
{this.props.children}
2930
<div>
3031
<ThemeToggleButton
3132
onChange={theme => {
@@ -35,9 +36,14 @@ export default class Chrome extends Component {
3536
}}
3637
/>
3738
</div>
39+
{this.props.children}
3840
</Theme.Provider>
3941
</Suspense>
4042
<p>This should appear in the first paint.</p>
43+
<Suspense fallback="Loading...">
44+
<p>This content should not block paint.</p>
45+
<LargeContent />
46+
</Suspense>
4147
<script
4248
dangerouslySetInnerHTML={{
4349
__html: `assetManifest = ${JSON.stringify(assets)};`,

‎fixtures/ssr/src/components/LargeContent.js

Lines changed: 243 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,243 @@
1+
import React, {Fragment} from 'react';
2+
3+
export default function LargeContent() {
4+
return (
5+
<Fragment>
6+
<p>
7+
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris
8+
porttitor tortor ac lectus faucibus, eget eleifend elit hendrerit.
9+
Integer porttitor nisi in leo congue rutrum. Morbi sed ante posuere,
10+
aliquam lorem ac, imperdiet orci. Duis malesuada gravida pharetra. Cras
11+
facilisis arcu diam, id dictum lorem imperdiet a. Suspendisse aliquet
12+
tempus tortor et ultricies. Aliquam libero velit, posuere tempus ante
13+
sed, pellentesque tincidunt lorem. Nullam iaculis, eros a varius
14+
aliquet, tortor felis tempor metus, nec cursus felis eros aliquam nulla.
15+
Vivamus ut orci sed mauris congue lacinia. Cras eget blandit neque.
16+
Pellentesque a massa in turpis ullamcorper volutpat vel at massa. Sed
17+
ante est, auctor non diam non, vulputate ultrices metus. Maecenas dictum
18+
fermentum quam id aliquam. Donec porta risus vitae pretium posuere.
19+
Fusce facilisis eros in lacus tincidunt congue.
20+
</p>
21+
<p>
22+
Pellentesque habitant morbi tristique senectus et netus et malesuada
23+
fames ac turpis egestas. Phasellus dolor ante, iaculis vel nisl vitae,
24+
ornare ornare orci. Praesent sit amet lobortis sapien. Suspendisse
25+
pharetra posuere libero ut dapibus. Donec condimentum ante urna. Aliquam
26+
laoreet tincidunt lacus, sed interdum tortor dapibus elementum. Nam sed
27+
faucibus lorem. Suspendisse finibus, velit sed molestie finibus, risus
28+
purus mollis ante, sit amet aliquet sapien nulla ut nibh. In eget ligula
29+
metus. Duis in purus mattis, blandit magna nec, dictum nunc.
30+
</p>
31+
<p>
32+
Sed convallis magna id tortor blandit dictum. Suspendisse in porttitor
33+
neque. Integer quis metus consequat, rutrum est sit amet, finibus justo.
34+
In hac habitasse platea dictumst. Nullam sagittis, risus sed vehicula
35+
porta, sapien elit ultrices nibh, vel luctus odio tortor et ante. Sed
36+
porta enim in hendrerit tristique. Pellentesque id feugiat libero, sit
37+
amet tempor enim. Proin gravida nisl justo, vel ornare dolor bibendum
38+
ac. Mauris scelerisque mattis facilisis. Praesent sodales augue mollis
39+
orci vulputate aliquet. Mauris molestie luctus neque, sed congue elit
40+
congue ut. Cras quis tortor augue. In auctor nulla vel turpis dapibus
41+
egestas. Phasellus consequat rhoncus nisi sed dignissim. Quisque varius
42+
justo non ex lobortis finibus cursus nec justo. Nulla erat neque,
43+
commodo et sem convallis, tristique faucibus odio.
44+
</p>
45+
<p>
46+
Ut condimentum volutpat sem, id accumsan augue placerat vel. Donec ac
47+
efficitur turpis. Suspendisse pretium odio euismod sapien bibendum, sed
48+
tempus est condimentum. Etiam nisl magna, consequat at ullamcorper at,
49+
sollicitudin eu eros. In mattis ligula arcu. Sed eu consectetur turpis,
50+
id molestie ligula. Vestibulum et venenatis enim. Donec condimentum
51+
vitae nisi et placerat. Sed fringilla vehicula egestas. Proin
52+
consectetur, nibh non ornare scelerisque, diam lorem cursus lectus, ut
53+
mattis mauris purus id mi. Curabitur non ligula sit amet augue molestie
54+
vulputate. Donec maximus magna at volutpat aliquet. Pellentesque
55+
dignissim nulla eget odio eleifend tincidunt. Etiam diam lorem, ornare
56+
vel scelerisque vel, iaculis id risus. Donec aliquet aliquam felis, ac
57+
vehicula lacus suscipit vitae. Morbi eu ligula elit.
58+
</p>
59+
<p>
60+
Praesent pellentesque, libero ut faucibus tempor, purus elit consequat
61+
metus, in ornare nulla lectus at erat. Duis quis blandit turpis. Fusce
62+
at ligula rutrum metus molestie tempor sit amet eu justo. Maecenas
63+
tincidunt nisl nunc. Morbi ac metus tempor, pretium arcu vel, dapibus
64+
velit. Nulla convallis ligula at porta mollis. Duis magna ante, mollis
65+
eget nibh in, congue tempor dolor. Sed tincidunt sagittis arcu, in
66+
ultricies neque tempor non. Suspendisse eget nunc neque. Nulla sit amet
67+
odio volutpat, maximus purus id, dictum metus. Integer consequat, orci
68+
nec ullamcorper porta, mauris libero vestibulum ipsum, nec tempor tellus
69+
enim non nunc. Quisque nisl risus, dapibus sit amet purus nec, aliquam
70+
finibus metus. Nullam condimentum urna viverra finibus cursus. Proin et
71+
sollicitudin tellus, porta fermentum felis. Maecenas ac turpis sed dui
72+
condimentum interdum sed sed erat. Mauris ut dignissim erat.
73+
</p>
74+
<p>
75+
Proin varius porta dui, id fringilla elit lobortis eget. Integer at
76+
metus elementum, efficitur eros id, euismod est. Morbi vestibulum nibh
77+
ac leo luctus sagittis. Praesent rhoncus, risus sit amet mattis dictum,
78+
diam sapien tempor neque, vel dignissim nulla neque eget ex. Nam
79+
sollicitudin metus quis ullamcorper dapibus. Nam tristique euismod
80+
efficitur. Pellentesque rhoncus vel sem eget lacinia. Pellentesque
81+
volutpat velit ac dignissim luctus. Vivamus euismod tortor at ligula
82+
mattis porta. Vestibulum ante ipsum primis in faucibus orci luctus et
83+
ultrices posuere cubilia curae;
84+
</p>
85+
<p>
86+
Proin blandit vulputate efficitur. Pellentesque sit amet porta odio.
87+
Nunc pulvinar varius rhoncus. Mauris fermentum leo a imperdiet pretium.
88+
Mauris scelerisque justo vel ante egestas, eget tempus neque malesuada.
89+
Sed dictum ex vel justo dignissim, aliquam commodo diam rutrum. Integer
90+
dignissim est ullamcorper augue laoreet consectetur id at diam. Vivamus
91+
molestie blandit urna, eget pulvinar augue dictum vestibulum. Duis
92+
maximus bibendum mauris, ut ultricies elit rhoncus eu. Praesent gravida
93+
placerat mauris. Praesent tempor ipsum at nibh rhoncus sagittis. Duis
94+
non sem turpis. Quisque et metus leo. Sed eu purus lorem. Pellentesque
95+
dictum metus sed leo viverra interdum. Maecenas vel tincidunt mi.
96+
</p>
97+
<p>
98+
Praesent consequat dapibus pellentesque. Fusce at enim id mauris laoreet
99+
commodo. Nullam ut mauris euismod, rhoncus tellus vel, facilisis diam.
100+
Aenean porta faucibus augue, a iaculis massa iaculis in. Praesent vel
101+
metus purus. Etiam quis augue eget orci lobortis eleifend ac ut lorem.
102+
Aenean non orci quis nisi molestie maximus. Mauris interdum, eros et
103+
aliquam aliquam, lectus diam pharetra velit, in condimentum odio eros
104+
non quam. Praesent bibendum pretium turpis vitae tristique. Mauris
105+
convallis, massa ut fermentum fermentum, libero orci tempus ipsum,
106+
malesuada ultrices metus sapien placerat lectus. Ut fringilla arcu nec
107+
lorem ultrices mattis. Etiam id tortor feugiat magna gravida gravida.
108+
Morbi aliquam, mi ac pellentesque mattis, erat ex venenatis erat, a
109+
vestibulum eros turpis quis metus. Pellentesque tempus justo in ligula
110+
ultricies porta. Phasellus congue felis sit amet dolor tristique
111+
finibus. Nunc eget eros non est ultricies vestibulum.
112+
</p>
113+
<p>
114+
Donec efficitur ligula quis odio tincidunt tristique. Duis urna dolor,
115+
hendrerit quis enim at, accumsan auctor turpis. Vivamus ante lorem,
116+
maximus vitae suscipit ut, congue eget velit. Maecenas sed ligula erat.
117+
Aliquam mollis purus at nisi porta suscipit in ut magna. Vivamus a
118+
turpis nec tellus egestas suscipit nec ornare nisi. Donec vestibulum
119+
libero quis ex suscipit, sit amet luctus leo gravida.
120+
</p>
121+
<p>
122+
Praesent pharetra dolor elit, sed volutpat lorem rhoncus non. Etiam a
123+
neque ut velit dignissim sodales. Vestibulum neque risus, condimentum
124+
nec consectetur vitae, ultricies ut sapien. Integer iaculis at urna sit
125+
amet malesuada. Integer tincidunt, felis ac vulputate semper, velit leo
126+
facilisis lorem, quis aliquet leo dui id lorem. Morbi non quam quis nisl
127+
sagittis consequat nec vitae libero. Nunc molestie pretium libero, eu
128+
eleifend nibh feugiat sed. Ut in bibendum diam, sit amet vehicula risus.
129+
Nam ornare ac nisi ac euismod. Nullam id egestas nulla. Etiam porta
130+
commodo ante sit amet pellentesque. Suspendisse eleifend purus in urna
131+
euismod auctor non vel nisi. Suspendisse rutrum est nunc, sit amet
132+
lacinia lacus dictum eget. Pellentesque habitant morbi tristique
133+
senectus et netus et malesuada fames ac turpis egestas. Morbi a blandit
134+
diam.
135+
</p>
136+
<p>
137+
Donec eget efficitur sapien. Suspendisse diam lacus, varius eu interdum
138+
et, congue ac justo. Proin ipsum odio, suscipit elementum mauris sed,
139+
porttitor congue est. Cras dapibus dictum ante, vitae gravida elit
140+
venenatis sed. Sed massa sem, posuere ut enim sit amet, vestibulum
141+
condimentum nibh. Pellentesque pulvinar sodales lacinia. Proin id
142+
pretium sapien, non convallis nulla. In mollis tincidunt sem et
143+
porttitor.
144+
</p>
145+
<p>
146+
Integer at sollicitudin sem. Suspendisse sed semper orci. Nulla at nibh
147+
nec risus suscipit posuere egestas vitae enim. Nullam mauris justo,
148+
mattis vel laoreet non, finibus nec nisl. Cras iaculis ultrices nibh,
149+
non commodo eros aliquam non. Sed vitae mollis dui, at maximus metus. Ut
150+
vestibulum, enim ut lobortis vulputate, lorem urna congue elit, non
151+
dictum odio lorem eget velit. Morbi eleifend id ligula vitae vulputate.
152+
Suspendisse ac laoreet justo. Proin eu mattis diam.
153+
</p>
154+
<p>
155+
Nunc in ex quis enim ullamcorper scelerisque eget ac eros. Class aptent
156+
taciti sociosqu ad litora torquent per conubia nostra, per inceptos
157+
himenaeos. Aliquam turpis dui, egestas a rhoncus non, fermentum in
158+
tellus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices
159+
posuere cubilia curae; Aenean non risus arcu. Nam ultricies lacinia
160+
volutpat. Class aptent taciti sociosqu ad litora torquent per conubia
161+
nostra, per inceptos himenaeos. Lorem ipsum dolor sit amet, consectetur
162+
adipiscing elit.
163+
</p>
164+
<p>
165+
Aliquam a felis leo. Proin lorem ipsum, congue eu cursus in, rhoncus ut
166+
libero. Vestibulum sit amet consequat nunc. Ut eleifend lobortis lacus,
167+
vel molestie metus viverra eget. Nullam suscipit eu magna scelerisque
168+
suscipit. Donec dictum in diam nec lacinia. Mauris pellentesque ex ut
169+
purus facilisis, eget placerat turpis semper. Sed dapibus lorem ante, et
170+
malesuada dui eleifend ac. Sed diam felis, semper ac nulla vel, posuere
171+
ultricies ante.
172+
</p>
173+
<p>
174+
Nunc elementum odio sapien, sit amet vulputate lorem varius at. Fusce
175+
non sapien vitae lorem aliquam pretium sit amet congue dolor. Nunc quis
176+
tortor luctus, pretium ex a, tincidunt urna. Aliquam fermentum massa a
177+
erat pharetra varius. Curabitur at auctor dui. Sed posuere pellentesque
178+
massa, vel bibendum urna dictum non. Fusce eget rhoncus urna. Maecenas
179+
sed lectus tellus. Pellentesque convallis dapibus nisl vitae venenatis.
180+
Quisque ornare a dolor ac pharetra. Nam cursus, mi a lacinia accumsan,
181+
felis erat fringilla magna, ac mattis nunc ante a orci.
182+
</p>
183+
<p>
184+
Nunc vel tortor euismod, commodo tortor non, aliquam nisi. Maecenas
185+
tempus mollis velit non suscipit. Mauris sit amet dolor sed ex fringilla
186+
varius. Suspendisse vel cursus risus. Vivamus pharetra massa nec dolor
187+
aliquam feugiat. Fusce finibus enim commodo, scelerisque ante eu,
188+
laoreet ex. Curabitur placerat magna quis imperdiet lacinia. Etiam
189+
lectus mauris, porttitor ac lacinia sed, posuere eget lacus. Mauris
190+
vulputate mattis imperdiet. Nunc id aliquet libero, vitae hendrerit
191+
purus. Praesent vestibulum urna ac egestas tempor. In molestie, nunc sit
192+
amet sagittis dapibus, ligula enim fermentum mi, lacinia molestie eros
193+
dui in tortor. Mauris fermentum pulvinar faucibus. Curabitur laoreet
194+
eleifend purus, non tincidunt tortor gravida nec. Nam eu lectus congue,
195+
commodo libero et, porttitor est. Nullam tincidunt, nisi eu congue
196+
congue, magna justo commodo massa, nec efficitur dui lectus non sem.
197+
</p>
198+
<p>
199+
Nullam vehicula, ipsum quis lacinia tristique, elit nulla dignissim
200+
augue, at pulvinar metus justo ac magna. Nullam nec nunc ac sapien
201+
mollis cursus eu ac enim. Pellentesque a pharetra erat. Ut tempor magna
202+
nisi, accumsan blandit lectus volutpat nec. Vivamus vel lorem nec eros
203+
blandit dictum eget ac diam. Nulla nec turpis dolor. Morbi eu euismod
204+
libero. Nam ut tortor at arcu porta tincidunt. In gravida ligula
205+
fringilla ornare imperdiet. Nulla scelerisque ante erat, efficitur
206+
dictum metus ullamcorper vel. Nam ac purus metus. Maecenas eget tempus
207+
nulla. Ut magna lorem, efficitur ut ex a, semper aliquam magna. Praesent
208+
lobortis, velit ac posuere mattis, justo est accumsan turpis, id
209+
sagittis felis mi in lacus.
210+
</p>
211+
<p>
212+
Aenean est mi, semper nec sem at, malesuada consectetur nunc. Aenean
213+
consequat sem quis sem consequat, non aliquam est placerat. Cras
214+
malesuada magna neque, et pellentesque nibh consequat at. Sed interdum
215+
velit et ex interdum, vel lobortis ante vestibulum. Nam placerat lectus
216+
eu commodo efficitur. Pellentesque in nunc ac massa porttitor eleifend
217+
ut efficitur sem. Aenean at magna auctor, posuere augue in, ultrices
218+
arcu. Praesent dignissim augue ex, malesuada maximus metus interdum a.
219+
Proin nec odio in nulla vestibulum.
220+
</p>
221+
<p>
222+
Aenean est mi, semper nec sem at, malesuada consectetur nunc. Aenean
223+
consequat sem quis sem consequat, non aliquam est placerat. Cras
224+
malesuada magna neque, et pellentesque nibh consequat at. Sed interdum
225+
velit et ex interdum, vel lobortis ante vestibulum. Nam placerat lectus
226+
eu commodo efficitur. Pellentesque in nunc ac massa porttitor eleifend
227+
ut efficitur sem. Aenean at magna auctor, posuere augue in, ultrices
228+
arcu. Praesent dignissim augue ex, malesuada maximus metus interdum a.
229+
Proin nec odio in nulla vestibulum.
230+
</p>
231+
<p>
232+
Aenean est mi, semper nec sem at, malesuada consectetur nunc. Aenean
233+
consequat sem quis sem consequat, non aliquam est placerat. Cras
234+
malesuada magna neque, et pellentesque nibh consequat at. Sed interdum
235+
velit et ex interdum, vel lobortis ante vestibulum. Nam placerat lectus
236+
eu commodo efficitur. Pellentesque in nunc ac massa porttitor eleifend
237+
ut efficitur sem. Aenean at magna auctor, posuere augue in, ultrices
238+
arcu. Praesent dignissim augue ex, malesuada maximus metus interdum a.
239+
Proin nec odio in nulla vestibulum.
240+
</p>
241+
</Fragment>
242+
);
243+
}

0 commit comments

Comments
 (0)