Fix JSON diff viewer performance issue causing UI freeze with large payloads

[sneha0099]

• when the test report's payload data increases its freezing the ui.
• when there is match between expected and actual data it can load the 8k line which is max of(expected and actual data) but its taking time.
• when the expected and actual data is not matching so total length of both of 12k(6k expected + 6k actual) is causing ui freeze.

Screen.Recording.2025-09-01.125309.mp4

[sneha0099]

• Issue:

  • If we have large test report data, Then currently this is freezing the UI

  • Because it is loading all data once and that's expensive and time consuming and blocking performance and all data is added in dom directly.

• Fix:

  • To solve this I've rendered data on demand using react window, when the user scrolls then new data is added in dom and when user scrolls again old data is removed from dom as this is not visible now.

  • This can now load 100k lines without any freeze.
    100k lines of expected and 100k lines of actual data can be compared and can show the diffs without any freeze.

  • used one unifiedGutter function instead of separate gutter functions

  • loaded data based on size:

  • if the size is <700 then it wont render virtually and can see it directly

  • for 700 to 100k line size it renders using virtualization.

---

• for <700 lines

Screen.Recording.2025-09-08.172756.mp4

---

• for 700 to 100k lines

Screen.Recording.2025-09-09.231846.mp4