Inserter: Poor Performance when Switching Blocks with Block Inserter Open

[jeryj]

Description

When the block inserter is open, there's a ~200ms lag when clicking to a new block. Sometimes as high as 500ms. It makes the editor feel very slow. Closing the inserter and clicking between blocks is fine.

Step-by-step reproduction instructions

1. Click between blocks with the inserter closed
2. Open the inserter
3. Click between blocks
4. Notice a delay until the new block is responsive
5. If there isn't a delay, then try throttling your CPU and repeat

Screenshots, screen recording, code snippet

No response

Environment info

Screen.Recording.2024-12-10.at.3.41.05.PM.mov

Please confirm that you have searched existing issues in the repo.

• Yes

Please confirm that you have tested with all plugins deactivated except Gutenberg.

• Yes

Please confirm which theme type you used for testing.

• Block
• Classic
• Hybrid (e.g. classic with theme.json)
• Not sure

[Mamaduka]

It could be related to recent changes in how inserter items are fetched - #62169. Performance should be slightly better after #67734, depending on the containers you switch between.

This is a combination of Inserter and Sidebar; I don't see warnings in incognito mode when only one of them is open. Testing in incognito mode gives us more precise results because React DevTools is known to affect performance.

The sidebar focus even performance issue was also discussed in #65564 (comment).

cc @jsnajdr

[jeryj]

It could be related to recent changes in how inserter items are fetched - #62169.

I think the bigger impact is that originally the inserter would always close on block select, so there was no need to make rerenders of the blocks in the inserter more performant. It was only rendered once when opened, as any click outside of the inserter would close it.

This is a combination of Inserter and Sidebar; I don't see warnings in incognito mode when only one of them is open. Testing in incognito mode gives us more precise results because React DevTools is known to affect performance.

I tested in incognito, and it was much faster. The biggest delay is still when clicking between containers that have a different root id. That's what would cause the 500ms delay for me. In incognito, that same container change takes 200ms, which is much much better.

I'm not sure how to go about it entirely, but here's a few debugging finds:

• onHover and onSelect change on each block select, but I think these could be refactored to not rely on a set value and compute them (like where to insert or what to show on hover) as needed.
• If we can figure out how to not rerender <InserterListItem /> as often that helps a lot here (maybe obviously so 😅)

[ellatrix]

We should add a metric for this