Chrome crashes after opening a category with hundreds of patterns from the pattern inserter.

[miksansegundo]

Description

Chrome crashes after opening a category with 323 patterns from the pattern inserter.

The issue seems to happen because the component <BlockPatternList> loads all patterns in the background.

A solution could be loading only the pattern in the view using the hook useInView from react-intersection-observer.

Step-by-step reproduction instructions

1. Register hundreds of patterns in a category
2. Open the editor's pattern inserter
3. Click on the category with hundreds of patterns
4. Wait for a few minutes until Chrome crashes

Screenshots, screen recording, code snippet

Screen.Recording.2566-05-17.at.18.21.06.mov

[kevin940726]

c.c. @youknowriad This is similar to the topic we briefly discussed. useAsyncList might not be sufficient after all?

[youknowriad]

Do we know the reason for this crash? useAsyncList is for performance issues (not blocking the page), this might be something else memory... some pattern is doing wrong things?

[kevin940726]

I think it's a combination of multiple issues: performance and memory leaks (#53382). I haven't identified most of them yet but I found something interesting.

IIRC, chrome devtools by default enable the "Disable cache" check in the network tab, which causes the same requests not to be cached when the devtools is open. Each <BlockPreview> loads the same set of stylesheets and scripts and iframes share the same request pool with the main frame. This causes the experience to degrade significantly when loading many patterns when the devtools is open.

One solution to that is to fetch the stylesheets once and cache and share them via constructable stylesheets. This technique also increases performance for other iframes.

Another possible enhancement is to replace iframes with shadow doms entirely for block previews, since iframes have more overhead than shadow doms. However, this has many edge cases that need to be considered separately.

[aaronrobertshaw]

Quick update. A PR fixing iframe memory leaks has already been merged and a second PR adding pagination to the patterns in the inserter should land soon. Combined, these should address the crash and performance issues reported here.

[glendaviesnz]

This should have been resolved by #54007 - please reopen if you still experience this issue on Gutenberg 16.7 or WP 6.4.