Patterns tab is not usable until all the user created patterns (Reusable blocks) are fetched from the server

[sathyapulse]

Description

When the remote patterns, core, and theme patterns are disabled, the patterns tab is not usable until all the user patterns have been fetched from the server.

This is not a problem for websites with fewer user patterns. However, it significantly increases the loading time for websites with more user patterns(reusable blocks). For instance, an application with ~4K user patterns must make 40 remote Rest API calls before displaying the categories in the patterns tab.

This is visible when the remote patterns, core, and theme patterns are disabled. Disable non-user patterns with the code snippet below.

/**
 * Restricts block editor patterns in the editor by removing support for all patterns from:
 *   - Dotcom and plugins like Jetpack
 *   - Dotorg pattern directory except for theme patterns
 */
function remove_non_user_created_patterns( $dispatch_result, $request, $route ) {
    if ( strpos( $route, '/wp/v2/block-patterns/patterns' ) === 0 ) {
        $patterns = WP_Block_Patterns_Registry::get_instance()->get_all_registered();


        if ( ! empty( $patterns ) ) {
            // Remove theme support for all patterns from Dotcom, and plugins. See https://developer.wordpress.org/themes/features/block-patterns/#unregistering-block-patterns
            foreach ( $patterns as $pattern ) {
                unregister_block_pattern( $pattern['name'] );
            }

            // Remove theme support for core patterns from the Dotorg pattern directory. See https://developer.wordpress.org/themes/features/block-patterns/#removing-core-patterns
            remove_theme_support( 'core-block-patterns' );
        }
    }


    return $dispatch_result;
}

 
 
// Remove and unregister patterns from core, Dotcom, and plugins. See https://github.com/Automattic/jetpack/blob/d032fbb807e9cd69891e4fcbc0904a05508a1c67/projects/packages/jetpack-mu-wpcom/src/features/block-patterns/block-patterns.php#L107
add_filter( 'rest_dispatch_request', 'remove_non_user_created_patterns', 12, 3 );
 
 
// Disable the remote patterns coming from the Dotorg pattern directory. See https://developer.wordpress.org/themes/features/block-patterns/#disabling-remote-patterns
add_filter( 'should_load_remote_block_patterns', '__return_false' );

It would be great if we could implement the following changes.

1. The patterns category is not displayed in the patterns tab until the user patterns are loaded. We could display the patterns category as soon as it is loaded.
2. We could start displaying the patterns as soon as each page is loaded rather than waiting for all patterns to be loaded.

This PR #64839 added a loader to indicate the user patterns loading state.

Step-by-step reproduction instructions

1. Create 4000+ reusable blocks with the CLI using

wp eval 'for ($i = 1; $i <= 4000; $i++) { wp_insert_post(["post_title" => "Reusable Block " . $i, "post_content" => "<!-- wp:paragraph --><p>This is block " . $i . "</p><!-- /wp:paragraph -->", "post_status" => "publish", "post_type" => "wp_block"]); }'

2. Open the Browser developer tools => Network tab
3. Open the post Editor and open the Inserter.
4. The user pattern will start fetching from the server
5. The patterns tab will be empty until the patterns are loaded from the server

Screenshots, screen recording, code snippet

It takes more than 30 seconds before the patterns tab is usable.

Screen.Recording.2024-09-23.at.19.44.14.2.mp4

Environment info

• WordPress 6.6.2
• Gutenberg 19.3.0 RC2

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