fix: make virtual-list loading more efficient

[ZachJW34]

User facing changelog

Increase rendering speed of items in spec-list

Additional details

When quickly scrolling the spec list, there is a flash of un-rendered content due to the the virtual list having to re-render so many elements. This only became an issue with the recent ACI work that added more components to each row.

This fix defers the rendering of many of the columns such that the row + filename is given priority, leading to a more responsive feel to the table. It doesn't fix the issue entirely as fast scrolls can still cause a white flash, but it does improve the experience.

This PR DOES NOT fix the scroll jank on Chrome. That is an issue in Chrome v102 that has been fixed in v103. The scroll behavior works find in Firefox + Electron

Steps to test

Check out muaz/CLOUD-577-spec-list-display-latest-runs and choose a project with a decent amount of tests. Scroll through the list quickly (or use the scrollbar) to see flashes on run-rendered content

How has the user experience changed?

Before:

Screen.Recording.2022-06-17.at.11.31.30.AM.mov

After:

Screen.Recording.2022-06-17.at.11.32.00.AM.mov

PR Tasks

• [na] Have tests been added/updated?
• [na] Has the original issue (or this PR, if no issue exists) been tagged with a release in ZenHub? (user-facing changes only)
• [na] Has a PR for user-facing changes been opened in cypress-documentation?
• [na] Have API changes been updated in the type definitions?

[cypress-bot]

Thanks for taking the time to open a PR!

• Create a Draft Pull Request if your PR is not ready for review. Mark the PR as Ready for Review when you're ready for a Cypress team member to review the PR.
• Become familiar with the Code Review Checklist for guidelines on coding standards and what needs to be done before a PR can be merged.

[cypress]

---

Test summary

37553 • 0 • 454 • 0 • 3

---

Run details

Project	cypress
Status	Passed
Commit	9c5581b
Started	Jun 17, 2022 6:20 PM
Ended	Jun 17, 2022 6:37 PM
Duration	17:08 💡
OS	Linux Debian - 10.11
Browser	Multiple

View run in Cypress Dashboard ➡️

---

Flakiness

	commands/actions/click.cy.js		1
1	... > scroll-behavior > can scroll to and click elements in html with scroll-behavior: smooth
	cypress/proxy-logging.cy.ts		1
1	Proxy Logging > request logging > xhr log has response body/status code when xhr response is logged second
	e2e/origin/commands/assertions.cy.ts		1
1	cy.origin assertions > #consoleProps > .should() and .and()

---

This comment has been generated by cypress-bot as a result of this project's GitHub integration settings. You can manage this integration in this project's settings in the Cypress Dashboard

[astone123]

Looks like a good improvement 👍🏻

[ZachJW34]

Going to merge, there are some flaky windows builds but I noticed these on the destination branch as well.