infinite loading + loading text prop + worker to avoid blocking main …

[puneet-goel]

I identified two main issues impacting performance with large diff files:

1. The computeLineInformation method is time-consuming and runs on the main UI thread, causing the screen to freeze.
2. The diff viewer renders all content at once, even when much of it isn't visible to the user, leading to unnecessary processing.

These issues result in a laggy and unresponsive user experience for large diffs. To address them, I implemented the following improvements:

1. Loading Indicator: Introduced a loadingText prop to show a loading element while the diff is being computed.
2. Infinite Loading Support: Instead of rendering all diff lines at once, the viewer now renders a fixed number initially and loads more on scroll. This is controlled via a new infiniteLoading object with two fields: pageSize and containerHeight.
3. Caching: Added caching for the results of computeLineInformation and computeHiddenBlocks to avoid redundant computations.
4. Web Worker Integration: Offloaded the computeLineInformation method to a web worker to prevent blocking the main UI thread.

I’ve also updated the example file and JSONs with large inputs to help test and validate performance improvements.

[puneet-goel]

Issue: https://github.com/Aeolun/react-diff-viewer-continued/issues/66

[reinrl]

@puneet-goel Just a thought: loadingText as a prop name seems a bit misleading (when the prop itself accepts a React element) - perhaps loadingContent or loadingElement?

Overall, great work on this, your efforts are much appreciated!

[yangzi0210]

@Aeolun Please review and merge for publication. Thank you~！

[puneet-goel]

@puneet-goel Just a thought: loadingText as a prop name seems a bit misleading (when the prop itself accepts a React element) - perhaps loadingContent or loadingElement?

Overall, great work on this, your efforts are much appreciated!

Hi @reinrl, thank you for the suggestion, I've resolved the same.

[anilpixel]

@Aeolun Really excited about this one! I think it's a great improvement for performance.

[yangzi0210]

@Aeolun

[yangzi0210]

@puneet-goel

Try sending him an email. I noticed that he has been pushing Git code recently, but I'm not sure why he hasn't been reviewing this merge.

[email protected]

[Aeolun]

@yangzi0210 Mostly I'm just not paying attention to github notification. I was under the impression it was a month since I'd last checked, but it seems it's been more like half a year 😭

[yangzi0210]

@Aeolun Very understandable, your work should be very busy. Please take some time to handle this PR, which is really useful for our users 🙏🏻

[yangziao2002-coder]

@Aeolun Really excited about this one! I think it's a great improvement for performance.