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