Skip to content

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

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 1 commit into
base: next
Choose a base branch
from

Conversation

puneet-goel
Copy link

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
Copy link
Author

Issue: #66

@reinrl
Copy link

reinrl commented May 19, 2025

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!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants