Use Vuetify's lazy attribute to delay mounting of DOM nodes

[bjester]

Summary

Description of the change(s) you made

• Updated all <VTooltip> usages to use lazy setting which delays their mount to the DOM until they need to be
• Updated our <Menu> component to also default lazy setting
• Overall, this reduced the attached DOM nodes by around 1000 nodes for a particular channel

Manual verification steps performed

1. Open the channel edit page
2. Hover over Publish or any icons and verify their tooltips show
3. Right click on content nodes and ensure the context menu shows correctly
4. Click the kebab menu on content nodes and ensure those menus show correctly

Screenshots (if applicable)

Below are screenshots of the Chrome performance monitor for the same channel on production vs locally with these changes. I left the channel open at the root to get a baseline on each. You can see there are less DOM nodes in the Elements tab.

Production	Dev (w/o changes)	Dev (w/ changes)

Does this introduce any tech-debt items?

---

Reviewer guidance

How can a reviewer test these changes?

• See manual verification steps

Are there any risky areas that deserve extra testing?

• Comparatively in development, this did reduce the JS Heap Size, but overall the Heap Size is greater than production

References

Comments

---

Contributor's Checklist

PR process:

• If this is an important user-facing change, PR or related issue the CHANGELOG label been added to this PR. Note: items with this label will be added to the CHANGELOG at a later time
• If this includes an internal dependency change, a link to the diff is provided
• The docs label has been added if this introduces a change that needs to be updated in the user docs?
• If any Python requirements have changed, the updated requirements.txt files also included in this PR
• Opportunities for using Google Analytics here are noted
• Migrations are safe for a large db

Studio-specifc:

• All user-facing strings are translated properly
• The notranslate class been added to elements that shouldn't be translated by Google Chrome's automatic translation feature (e.g. icons, user-generated text)
• All UI components are LTR and RTL compliant
• Views are organized into pages, components, and layouts directories as described in the docs
• Users' storage used is recalculated properly on any changes to main tree files
• If there new ways this uses user data that needs to be factored into our Privacy Policy, it has been noted.

Testing:

• Code is clean and well-commented
• Contributor has fully tested the PR manually
• If there are any front-end changes, before/after screenshots are included
• Critical user journeys are covered by Gherkin stories
• Any new interactions have been added to the QA Sheet
• Critical and brittle code paths are covered by unit tests

---

Reviewer's Checklist

This section is for reviewers to fill out.

• Automated test coverage is satisfactory
• PR is fully functional
• PR has been tested for accessibility regressions
• External dependency files were updated if necessary (yarn and pip)
• Documentation is updated
• Contributor is in AUTHORS.md

[bjester]

@MisRob I tried profiling this like you but I couldn't quite get the views you had looked at for tracking memory usage. I'm curious of your thoughts on this. The lazy prop prevents mounting of the DOM nodes until activated. So in theory, less DOM nodes could be mean less memory?

[MisRob]

@bjester That's great. I think this could be one of the things having an impact on #3367. I replied to your message on Slack in regards to performance charts. I'd be curious to see whether we can observe something on before/after performance profiles, but even without them, I think this will be a good direction.

[marcellamaki]

Overall, this reduced the attached DOM nodes by around 1000 nodes for a particular channel

!!!

[marcellamaki]

I can see in the notes that you updated <Menu /> to use the lazy setting (and can see the prop added there). Is lazy not an option for VMenu which is why you switched just to <Menu/>? Or is this for another reason?

[bjester]

lazy is indeed an option for VMenu. Our Menu inherits VMenu, and so I updated this since it also defaults the offsetY attribute-- I'm sure we'll want that 99% of the time for our menus anyways. There were many usages of Menu, so by adding lazy there, I took advantage of that abstraction layer requiring a single change. We can do the same when we migrate off Vuetify and to KDS for things like this.

[marcellamaki]

looks fine to me - previous comments were mostly just curiosity, no outstanding concerns.