Twenty Twenty-One: menu toggle is not responsive until after "load" event

[gernberg]

The bundled theme "Twenty Twenty-One" primary navigation / menu toggle is not functional until the load event triggers on mobile.

This means that the menu might be unusable for multiple seconds.

Can be reproduced by:

1. Pick a page with this theme and some heavier resources / images.
2. Simulate a mobile browser + slow connection speed.
3. Attempt to open the primary navigation between the DOMContentLoaded (DCL) and "load" events.

Reading the code for primary-navigation.js, it looks to me like the only dependency for this script would be that the DOM element for the menu exists.

As of #59316, the script is loading as defer, meaning that the required DOM elements for the menu will always be ready by the time primary-navigation.js executes.

I would suggest to improve page responsiveness by removing the event listener completely and initializing the menu immediately when primary-navigation.js executes.

One alternative considered would be to change from "load" to "DOMContentLoaded", but I don't think that brings any benefits compared to just getting rid of the event listener logic completely.

[gernberg]

Suggested patch

[gernberg]

Suggested fix with src/ folder included.

[westonruter]

I'd love to see the mobile menu reimplemented with dialog and Invoker Commands to eliminate the JavaScript dependency altogether, at some point. See also: ​https://github.com/WordPress/gutenberg/pull/69720#issuecomment-2795480829

[westonruter]

I agree there is no reason to wait for the load event to initialize the nav menu.

@gernberg thanks for reporting this great issue and providing a patch!

[westonruter]

Since there is another ticket (#60196) for this theme milestoned for the next minor release, I'll milestone this ticket likewise.

[westonruter]

I'm iterating on the patch to opt for the DOMContentLoaded event. Even though defer is used, it is possible (although unlikely) that another dependent script could be registered which does not have the defer strategy, in which case this primary-navigation.js script would fall back to the blocking loading strategy as well. Since the script is printed in the head this would result in the nav menu not working at all since the script would be executed before the body is constructed in the DOM. So using the DOMContentLoaded will ensure the nav menu is constructed after the the DOM is completely constructed, regardless of the loading strategy.

[westonruter]

In 60352:

Twenty Twenty-One: Add nav menu toggle behaviors at DOMContentLoaded instead of at the load event.

The load event (on window) fires after all resources on a page have been loaded, including images. This means that
on a slow connection, the mobile nav menu button may be rendered yet unresponsive to taps between when it first appears
and when the page has fully loaded. This is rectified by switching to the DOMContentLoaded event so that the nav menu
behaviors are attached as soon as the DOM has fully loaded.

Props gernberg, westonruter, sabernhardt.
Fixes #63613.

[westonruter]

Re-opening for 6.8.2 consideration.

[audrasjb]

We ran into this ticket during today's 6.8.2 bug scrub.
The changeset is pretty straightforward and it makes sense to include such a small change given we already have another issue milestoned to 6.8.2 for TT1.

Marking this as dev-reviewed (double committer sign-off) so it is ready for a 6.8 backport.

[audrasjb]

In 60423:

Twenty Twenty-One: Add nav menu toggle behaviors at DOMContentLoaded instead of at the load event.

The load event (on window) fires after all resources on a page have been loaded, including images. This means that
on a slow connection, the mobile nav menu button may be rendered yet unresponsive to taps between when it first appears
and when the page has fully loaded. This is rectified by switching to the DOMContentLoaded event so that the nav menu
behaviors are attached as soon as the DOM has fully loaded.

Reviewed by audrasjb.
Merges [60352] to the 6.8 branch.
Props gernberg, westonruter, sabernhardt.
Fixes #63613.