feat(ui): Optimize Diff Rendering Asynchronous Loading with Virtual Scrolling to Improve Performance

[linghaoSu]

Fixes #17859, Fixes #20136

Since a large number of diff files can cause a page to get stuck, the diff behaviour is split into asynchronous to avoid blocking the browser rendering.

At the same time, add virtual scrolling in the code display area to avoid adding too many dom at once, which will cause performance pressure on the browser at the same time.

Before

2024-09-13.15.23.50.720p.mov

Now

cliped-480p.mov

Checklist:

• Either (a) I've created an enhancement proposal and discussed it with the community, (b) this is a bug fix, or (c) this does not need to be in the release notes.
• The title of the PR states what changed and the related issues number (used for the release note).
• The title of the PR conforms to the Toolchain Guide
• I've included "Closes [ISSUE #]" or "Fixes [ISSUE #]" in the description to automatically close the associated issue.
• I've updated both the CLI and UI to expose my feature, or I plan to submit a second PR with them.
• Does this PR require documentation updates?
• I've updated documentation as required by this PR.
• I have signed off all my commits as required by DCO
• I have written unit and/or e2e tests for my change. PRs without these are unlikely to be merged.
• My build is green (troubleshooting builds).
• My new feature complies with the feature status guidelines.
• I have added a brief description of why this PR is necessary and/or what this PR solves.
• Optional. My organization is added to USERS.md.
• Optional. For bug fixes, I've indicated what older releases this fix should be cherry-picked into (this may or may not happen depending on risk/complexity).

[bunnyshell]

🔴 Preview Environment stopped on Bunnyshell

See: Environment Details | Pipeline Logs

Available commands (reply to this comment):

• 🔵 /bns:start to start the environment
• 🚀 /bns:deploy to redeploy the environment
• ❌ /bns:delete to remove the environment

[bunnyshell]

✅ Preview Environment created on Bunnyshell but will not be auto-deployed

See: Environment Details

Available commands (reply to this comment):

• 🚀 /bns:deploy to deploy the environment

[linghaoSu]

Hi team Where do I get the account password for this preview environment? https://argocd-2z2443.bunnyenv.com/

[nitishfy]

LGTM!

[linghaoSu]

@CodiumAI-Agent /review

[CodiumAI-Agent]

PR Reviewer Guide 🔍

(Review updated until commit 53fa737)

⏱️ Estimated effort to review: 4 🔵🔵🔵🔵⚪

🧪 No relevant tests

🔒 No security concerns identified

⚡ Key issues to review Performance Concern The use of virtual scrolling and asynchronous loading is implemented, but there's no handling for potential race conditions or errors during the asynchronous operations. This could lead to inconsistent states or UI errors under certain conditions. Error Handling The processQueue function lacks comprehensive error handling, which might lead to unhandled promise rejections or failures that are not communicated to the user.

[crenshaw-dev]

I tested in the Bunnyshell environment, and this seems to work beautifully. I'm not enough of a frontend expert to give a proper review, but hopefully one of our UI folks can take a look soon. Thanks for the PR!!

[CodiumAI-Agent]

Persistent review updated to latest commit 53fa737

[andrii-korotkov-verkada]

@linghaoSu, I've asked for review in CNCF Slack. Can you rebase on the latest master and re-test, please?

[thesuperzapper]

As part of the work for #17188, I am making some significant updates to the underlying diff code, can we hold off on merging this until I have raised that PR to avoid conflicts?

There is a good chance some kind of asynchronous solution will still be needed, but it's probably easier if we merge the update first.

I will post a link to my PR (hopefully ready sometime today) on that issue.