App becomes unresponsive when loading large posts

[designsimply]

Steps to reproduce:

1. Create a Gutenberg post on the web with Gutenberg demo content using a variety of blocks.
2. Add about 10,000 words.
3. Try to open the post in Gutenberg in the app.
4. If you can open the post, try scrolling.
5. If the post gets closed, re-open and try scrolling again.
6. If you can open the post and scroll, then try editing any block.

Result: triggered the ANR dialog trying to open the post in Gutenberg in the app.

/hat tip @rachelmcr for the original report at wordpress-mobile/WordPress-Android#8628.

(internal ref: p4a5px-2iV-p2)

I tested and confirmed with Pixel 3, Android 9, WPAndroid alpha-153 (11.9 alpha) using self-hosted site alleged-swift.jurassic.ninja running WP 5.1 and Gutenberg 5.1.1.

[designsimply]

Noting that I also tested with WP Internal 11.9.0.20190226 on iPad Mini 4 (WiFi) (iPad5,1) iOS 12.1.4 and I was able to open and edit the same large post (10000+ words plus several types of blocks) without the iOS app crashing but the delay is very long and there's not spinner or indicator that you can't interact with the app while it's loading or updating so it seems like the app becomes stuck but it's really just taking a long time to process the post. (2m59s)

I don't think an extra issue is needed for this, but if you'd like to see one created just let me know!

[hypest]

Thanks for reporting the iOS side case too @designsimply ! I might actually be a different issue but, let's keep things simple for now and investigate first before opening a different ticket. @SergioEstevao , will you be able to have a look and investigate what's the main culprit for the long opening time on iOS? Let's try to find out if the delay lies in the native side (before the RN editor starts) or inside the RN code, cool?

[SergioEstevao]

@designsimply can you link to the original sample content, for us to copy/paste? We probably can build a unit test around this.

Another question did you try to open the same post using our current Aztec editor?

[hypest]

can you link to the original sample content

If I remember correctly from a past convo with @rachelmcr , I recreated such a post by copy pasting the Gutenberg demo content multiple times on a site of mine. Here's the one I use @SergioEstevao : https://stefanosuser.wordpress.com/2019/01/07/long-demo-post/

[designsimply]

@designsimply can you link to the original sample content, for us to copy/paste? We probably can build a unit test around this.

I used two sources of sample content combined to one post:

1. Gutenberg Demo Post
2. Lipsum generator (enter 10000, select "words", click Generate Lorem Ipsum)

There are also two real-world sample posts that were used during performance testing in Gutenberg that you might consider as well:

1. Performance: Improve the initial loading time and the feeling fo smoothness while typing in blocks. WordPress/gutenberg#11782 (comment)
2. Extensive articles with over 1700 words and various blocks make Gutenberg very slow. WordPress/gutenberg#10418 (comment)

Another question did you try to open the same post using our current Aztec editor?

I did! And I didn't have any stability problems with Aztec.

[designsimply]

@SergioEstevao @hypest I just tested again with WPAndroid alpha-155 (11.9 alpha) and a crash did not happen again for the demo + lorem ipsum content but crashes keep happening when I try with this sample content: https://gist.github.com/florianbrinkmann/4e9e4d23eaefb8b23484badddd848196

[hypest]

wordpress-mobile/WordPress-Android#9370 got merged and that one should help start the editor faster than before. The editor will still take some time to fully parse and render the post but, the android app won't be unresponsive at least.

[hypest]

App no longer becomes unresponsive per se. Large posts can still impose a delay until the post is rendered and editable, but that'd be a different issue. Let's close this issue and perhaps open a different one if the delay is still a problem. WDYT @designsimply ?

[SergioEstevao]

For reference, I uploaded the content that @designsimply used to one of my websites using the browser, and even on the laptop the browser struggled to open the post, and even after the post was open, it was very slow to type.
So there is an underlying problem with Gutenberg performance on long posts.

[hypest]

Good point sharing that experience @SergioEstevao . Can you get in touch with @youknowriad too to perhaps report it to the Gutenberg repo too? Thanks in advance!

[designsimply]

Related: WordPress/gutenberg#11782 and WordPress/gutenberg#14079

I think we can close this in favor of WordPress/gutenberg#14079 since you have made an update in wordpress-mobile/WordPress-Android#9370 and you have also identified that it is an underlying problem with Gutenberg itself. Thank you for looking into this since Gutenberg Mobile is launching this month as an opt-in for the first time.