Navigation: Preload API requests

[noisysocks]

When loading the Navigation screen, there are a lot of loading spinners due to API requests to /menus and /menu-items. We should preload these requests so that the screen appears faster.

For reference, here's how edit-site does this:

gutenberg/lib/edit-site-page.php

Lines 153 to 172 in f62d5ea

	// Preload block editor paths.
	// most of these are copied from edit-forms-blocks.php.
	$preload_paths = array(
	'/?context=edit',
	'/wp/v2/types?context=edit',
	'/wp/v2/taxonomies?context=edit',
	'/wp/v2/pages?context=edit',
	'/wp/v2/themes?status=active',
	array( '/wp/v2/media', 'OPTIONS' ),
	);
	$preload_data = array_reduce(
	$preload_paths,
	'rest_preload_api_request',
	array()
	);
	wp_add_inline_script(
	'wp-api-fetch',
	sprintf( 'wp.apiFetch.use( wp.apiFetch.createPreloadingMiddleware( %s ) );', wp_json_encode( $preload_data ) ),
	'after'
	);

[noisysocks]

Doesn't look like we can use wp.apiFetch.createPreloadingMiddleware. See #24672 (comment).

[spacedmonkey]

Some preloading was added in #34364

However, there are still a number of API requests that are not preloaded.

The one I could not work out in my testing was '/wp/v2/types/?context=edit', . I believe that types endpoint is hit early in the load process and did not hit the preloading middleware. I couldn't work it while working on #34364 .

I still think we should revisit this ticket and try preload a much as data possible. It worth nothing, you are avoid preloaded data, by just adding a query string to REST API request. Like this.

wp.apiFetch({path: "__experimental/menus?cb=<timestamp>"})

[talldan]

I think the types one loads as a side effect of the 'stub' navigation post entity that @adamziel implemented - because it's a postType entity it causes them to be fetched.

It should go away if #34839 makes it in.

edit: worth noting that postTypes are still fetched when the block placeholder is displayed for the 'Add all pages' option, so it could still be worth caching.

[anton-vlasenko]

Are there any additional steps needed to reproduce this?
When I tried to reproduce this in my local environment, I only saw one xhr/fetch request.
What do I need to do to see those "additional" requests?
I'd appreciate it if somebody could help me to reproduce this issue.

[spacedmonkey]

@anton-vlasenko are you sure you haven't got a filter on? Looks like there is something in the search field...

Here is a screencast of my screen.

Screen.Recording.2021-09-21.at.22.53.43.mov

The following requests should be preloaded

• wp/v2/types/
• __experimental/menus?context=edit&per_page=100

We should also remove call to __experimental/menus/<current_menu_id> as this data will be loaded in __experimental/menus

[anton-vlasenko]

@spacedmonkey Thank you for the screencast!
I'm able to reproduce it now.
I don't know what was going on, I believe I didn't have any filters.
But it doesn't matter because I'm able to reproduce it now.
Thank you!