<!--IssueSummary start--> <details> <summary> Everyone can contribute. [Help move this issue forward](https://handbook.gitlab.com/handbook/marketing/developer-relations/contributor-success/community-contributors-workflows/#contributor-links) while earning points, leveling up and collecting rewards. </summary> - [Close this issue](https://contributors.gitlab.com/manage-issue?action=close&projectId=278964&issueIid=395495) </details> <!--IssueSummary end--> Right now the MR Changes page uses Virtual Scrolling solution to render diffs. It works well except for the part where it needs to [pre-render the whole list of diffs](https://gitlab.com/gitlab-org/gitlab/-/blob/master/app/assets/javascripts/diffs/components/app.vue#L716-731). This operation is thread blocking so it introduces an input delay or frame drops and it's also the main reason for [high TBT numbers in our SiteSpeed pipeline](https://gitlab.com/gitlab-org/gitlab/-/issues/338359). We could solve that by [having a non-wrapping mode for diff lines](https://gitlab.com/gitlab-org/gitlab/-/issues/20159), which would also require us to [rework the diff file layout](https://gitlab.com/gitlab-org/gitlab/-/issues/393936). That would allow us to skip the pre-render step because the height of each diff would be known in advance. For the diffs that contain discussions or if the non-wrapping mode is disabled we could just keep the pre-render step, so the functionality stays exactly the same for end user no matter what mode is chosen or if a diff has discussions. We can further improve that in the future by making code discussions float. This change could also significantly benefit [the diffs SSR experiment](https://gitlab.com/gitlab-org/gitlab/-/issues/385901) because we'd be able to reliably use `content-visibility` with the same logic.