fix(masthead): lazy loading megamenu and side nav

[IgnacioBecerra]

Related Ticket(s)

#9582

Description

Currently the Masthead loads both the SideNav and Megamenu components at the same time, even if they haven't been opened yet. This causes the amount of nodes to increase considerably right away. In order to mitigate this, a fast solution is to dynamically load the required components only when the user has interacted with the menus.

This means that the mobile version wouldn't be loading the Megamenu, and the desktop wouldn't load SideNav until/if required.

Using @juanleon9's NodeCount script on the dds-masthead-container (which contains both dds-side-nav and dds-megamenu) these are the following stats:

• Megamenu and SideNav not loaded: NODES 2497 COMMENTS 560 INTERS 1342

• Megamenu loaded in / SideNav not loaded (essentially Desktop view): NODES 5241 COMMENTS 1146 INTERS 2608

• SideNav loaded in / Megamenu not loaded (essentially mobile view): NODES 6518 COMMENTS 1566 INTERS 3014

• Both SideNav and MegaMenu loaded in (same count as before this PR): NODES 9262 COMMENTS 2152 INTERS 4280

Seems like the total nodes each menu brings in is about:

• Megamenu: 2744
• SideNav: 4021

At least with this PR we're saving about 6765 nodes from populating the page, at least right away.

Changelog

Changed

• lazy loading side-nav and megamenu components only when user interacts with them

[ibmdotcom-bot]

Deploy preview created for package React: https://ibmdotcom-react.s3.us-south.cloud-object-storage.appdomain.cloud/deploy-previews/9585/index.html

Built with commit: b670247a2c78cb0d0eb8287a21b432e8500b9ba8

[ibmdotcom-bot]

Deploy preview created for package NextJS Test Application: https://ibmdotcom-nextjs-test-upstream.s3.us-east.cloud-object-storage.appdomain.cloud/deploy-previews/9585/index.html

Built with commit: b670247a2c78cb0d0eb8287a21b432e8500b9ba8

[jeffchew]

perhaps there's a babel config for this?

[andy-blum]

https://babeljs.io/docs/en/babel-plugin-syntax-dynamic-import

NOTE: This plugin is included in @babel/preset-env, in ES2020

[ibmdotcom-bot]

Deploy preview created for package Web Components: https://ibmdotcom-webcomponents.s3.us-east.cloud-object-storage.appdomain.cloud/deploy-previews/9585/index.html

Built with commit: b670247a2c78cb0d0eb8287a21b432e8500b9ba8

[ibmdotcom-bot]

Deploy preview created for package Web Components HTML Test Application: https://ibmdotcom-web-components-html-test-upstream.s3.us-east.cloud-object-storage.appdomain.cloud/deploy-previews/9585/index.html

Built with commit: b670247a2c78cb0d0eb8287a21b432e8500b9ba8

[ibmdotcom-bot]

Deploy preview created for package Web Components (React wrapper): https://ibmdotcom-web-components-react.s3-web.us-east.cloud-object-storage.appdomain.cloud/deploy-previews/9585/index.html

Built with commit: b670247a2c78cb0d0eb8287a21b432e8500b9ba8

[IgnacioBecerra]

After discussing with @andy-blum, we agreed an even greater optimization would be to render only one megamenu at a time, and remove it from the DOM once it is closed.

With this new method, we are now down to NODES 1319 COMMENTS 316 INTERS 671 whenever a megamenu is closed, and only NODES 2445 COMMENTS 553 INTERS 1224 if a megamenu is open.

[andy-blum]

@IgnacioBecerra Can you rebase this onto feat/masthead-v2 to pull in the v2 story & other updates?

[andy-blum]

I had too many problems rebasing this, so I manually duplicated the changes to a new PR, #9602

[IgnacioBecerra]

Closing this PR in favor of Andy's remade PR.