Resolves #4675 virtualizes Commit Composer diff rendering

Author: d13

CHANGELOG.md

@@ -22,6 +22,7 @@ The format is based on [Keep a Changelog](http://keepachangelog.com/) and this p
   - Adds `gitlens.graph.initialRowSelection` setting to specify whether to select the "Work in progress" (WIP) row instead of HEAD if there are uncommitted changes
 - Changes to use the "merge target" when we are creating pull requests ([#4709](https://github.com/gitkraken/vscode-gitlens/issues/4709))
 - Changes the minimum VS Code version to 1.95.0 ([#4691](https://github.com/gitkraken/vscode-gitlens/issues/4691))
+- Greatly improves performance of the _Commit Composer_ view by virtualizing file diffs ([#4675](https://github.com/gitkraken/vscode-gitlens/issues/4675))
 
 ### Fixed
 

src/webviews/apps/plus/composer/components/diff/diff-file.ts

@@ -53,12 +53,39 @@ export class GlDiffFile extends LitElement {
 	@state()
 	private parsedDiff?: DiffFile[];
 
+	@state()
+	private hasRendered = false;
+
+	@state()
+	private _isVisible = false;
+
+	@property({ type: Boolean, reflect: true, attribute: 'is-visible' })
+	get isVisible(): boolean {
+		return this._isVisible;
+	}
+
+	private set isVisible(value: boolean) {
+		this._isVisible = value;
+	}
+
 	// should only ever be one file
 	get diffFile(): DiffFile | undefined {
 		return this.parsedDiff?.[0];
 	}
 
 	private diff2htmlUi?: Diff2HtmlUI;
+	private intersectionObserver?: IntersectionObserver;
+
+	override connectedCallback() {
+		super.connectedCallback?.();
+		this.setupIntersectionObserver();
+	}
+
+	override disconnectedCallback() {
+		super.disconnectedCallback?.();
+		this.intersectionObserver?.disconnect();
+		this.intersectionObserver = undefined;
+	}
 
 	override firstUpdated() {
 		this.processDiff();
@@ -68,42 +95,78 @@ export class GlDiffFile extends LitElement {
 	override updated(changedProperties: Map<string | number | symbol, unknown>) {
 		super.updated(changedProperties);
 
-		if (changedProperties.has('filename') || changedProperties.has('hunks')) {
+		if (changedProperties.has('diffText') || changedProperties.has('filename') || changedProperties.has('hunks')) {
 			this.processDiff();
 		}
-		if (changedProperties.has('diffText') || changedProperties.has('defaultExpanded')) {
+
+		if (changedProperties.has('parsedDiff') || changedProperties.has('sideBySide')) {
+			this.renderDiff(true);
+		} else if (changedProperties.has('defaultExpanded') || changedProperties.has('isVisible')) {
 			this.renderDiff();
 		}
 	}
 
 	override render() {
-		return html`<div id="diff"></div>`;
+		return html`<div id="diff" class="diff-container"></div>`;
 	}
 
-	private renderDiff() {
-		if (!this.parsedDiff || !this.filename) {
+	private setupIntersectionObserver() {
+		this.intersectionObserver = new IntersectionObserver(
+			entries => {
+				for (const entry of entries) {
+					this.isVisible = entry.isIntersecting;
+				}
+			},
+			{
+				// Use a margin to start rendering slightly before the element enters the viewport
+				rootMargin: '100px',
+			},
+		);
+		this.intersectionObserver.observe(this);
+	}
+
+	private clearDiff() {
+		if (this.targetElement) {
 			this.targetElement.innerHTML = '';
+		}
+		this.hasRendered = false;
+	}
+
+	private renderDiff(force = false) {
+		// If not visible or no data, clear and return
+		if (!this.isVisible || !this.parsedDiff || !this.filename) {
+			this.clearDiff();
 			return;
 		}
-		const config: Diff2HtmlUIConfig = {
-			colorScheme: ColorSchemeType.AUTO,
-			outputFormat: this.sideBySide ? 'side-by-side' : 'line-by-line',
-			drawFileList: false,
-			highlight: false,
-			// NOTE: Avoiding passing rawTemplates to Diff2HtmlUI to prevent Diff2Html from
-			// compiling templates at runtime via Hogan.compile (which uses eval), which violates
-			// the webview CSP (no 'unsafe-eval'). If we need to customize templates in the future,
-			// switch to providing precompiled templates in the bundle instead of raw strings.
-			compiledTemplates: compiledComposerTemplates,
-		};
-		this.diff2htmlUi = new Diff2HtmlUI(this.targetElement, this.parsedDiff, config);
+
+		// Don't re-render if already rendered
+		if (this.hasRendered && !force) {
+			return;
+		}
+
+		if (!this.diff2htmlUi || force) {
+			const config: Diff2HtmlUIConfig = {
+				colorScheme: ColorSchemeType.AUTO,
+				outputFormat: this.sideBySide ? 'side-by-side' : 'line-by-line',
+				drawFileList: false,
+				highlight: false,
+				// NOTE: Avoiding passing rawTemplates to Diff2HtmlUI to prevent Diff2Html from
+				// compiling templates at runtime via Hogan.compile (which uses eval), which violates
+				// the webview CSP (no 'unsafe-eval'). If we need to customize templates in the future,
+				// switch to providing precompiled templates in the bundle instead of raw strings.
+				compiledTemplates: compiledComposerTemplates,
+			};
+			this.diff2htmlUi = new Diff2HtmlUI(this.targetElement, this.parsedDiff, config);
+		}
 		this.diff2htmlUi.draw();
 		// this.diff2htmlUi.highlightCode();
 
 		const detailsElement = this.targetElement?.querySelector('details');
 		if (detailsElement) {
 			detailsElement.open = this.defaultExpanded;
 		}
+
+		this.hasRendered = true;
 	}
 
 	private processDiff() {

src/webviews/apps/plus/composer/components/diff/diff.css.ts

@@ -99,7 +99,7 @@ export const hljsStyles = css`
 export const diff2htmlStyles = css`
 	:host {
 		--d2h-intrinsic-base-height: 3.5rem; /* header height */
-		--d2h-intrinsic-container-offset-height: 10px; /* 10px scrollbar height + 2px vertical borders */
+		--d2h-intrinsic-container-offset-height: 12px; /* 10px scrollbar height + 2px vertical borders */
 		--d2h-intrinsic-line-count: 50;
 		--d2h-intrinsic-line-height: calc(
 			var(--editor-font-size) * 1.5
@@ -113,12 +113,12 @@ export const diff2htmlStyles = css`
 		position: relative;
 	}
 
-	.d2h-file-wrapper {
+	.diff-container {
 		content-visibility: auto;
 		contain-intrinsic-size: auto var(--d2h-intrinsic-base-height);
 	}
 
-	.d2h-file-wrapper[open] {
+	.diff-container:has(.d2h-file-wrapper[open]) {
 		contain-intrinsic-height: var(--d2h-intrinsic-height);
 	}