DataViews: Page selection with large content can block UI

[Mamaduka]

When switching page selection, the UI can become unresponsive if the selected page has large content.

I think we need a way to mark router changes as transitions, which can be interrupted by the user's next action. React's useTransition has a similar example in the docs - https://react.dev/reference/react/useTransition#examples

cc @youknowriad, @oandregal, @ntsekouras

Testing instructions

1. Create a page with large content. You can use content from - https://github.com/WordPress/gutenberg/blob/trunk/test/performance/assets/large-post.html.
2. Open the Site Editor.
3. Navigate to Design > Pages.
4. Try switching between pages in DataView.

Screencast

You can see the "Large Page" content flashes before the selection is updated again.

https://github.com/WordPress/gutenberg/assets/240569/00253299-11f2-423e-9a04-aa76510a45b9

[youknowriad]

Indeed, this is currently tracked in the "navigate" metric. So improving that one would be the goal.

Do you think just wrapping with a transition would be enough?

[Mamaduka]

Do you think just wrapping with a transition would be enough?

I did give it a try but didn't see any improvements.