Alternative solution: only format when the code is visible

fregante · fregante · commit 7cccc48eedf0 · 2020-01-27T17:25:03.000+07:00
diff --git a/source/features/show-whitespace.tsx b/source/features/show-whitespace.tsx
@@ -48,16 +48,20 @@ function showWhiteSpacesOn(line: Element): void {
 	}
 }
 
-async function run(): Promise<void> {
-	let timeKeeper = Date.now();
-	for (const line of select.all('.blob-code-inner')) {
-		line.classList.add('rgh-showing-whitespace');
-		showWhiteSpacesOn(line);
-		if (timeKeeper + 100 < Date.now()) {
-			await new Promise(resolve => setTimeout(resolve, 50));
-			timeKeeper = Date.now();
+const viewportObserver = new IntersectionObserver(changes => {
+	for (const change of changes) {
+		if (change.isIntersecting) {
+			showWhiteSpacesOn(change.target);
+			viewportObserver.unobserve(change.target);
 		}
 	}
+});
+
+async function run(): Promise<void> {
+	for (const line of select.all('.blob-code-inner:not(.rgh-observing-whitespace)')) {
+		line.classList.add('rgh-observing-whitespace');
+		viewportObserver.observe(line);
+	}
 }
 
 function init(): void {

Original file line number	Diff line number	Diff line change
`@@ -48,16 +48,20 @@ function showWhiteSpacesOn(line: Element): void {`
`48`	`48`	`}`
`49`	`49`	`}`
`50`	`50`
`51`		`-async function run(): Promise<void> {`
`52`		`- let timeKeeper = Date.now();`
`53`		`- for (const line of select.all('.blob-code-inner')) {`
`54`		`- line.classList.add('rgh-showing-whitespace');`
`55`		`- showWhiteSpacesOn(line);`
`56`		`- if (timeKeeper + 100 < Date.now()) {`
`57`		`- await new Promise(resolve => setTimeout(resolve, 50));`
`58`		`- timeKeeper = Date.now();`
	`51`	`+const viewportObserver = new IntersectionObserver(changes => {`
	`52`	`+ for (const change of changes) {`
	`53`	`+ if (change.isIntersecting) {`
	`54`	`+ showWhiteSpacesOn(change.target);`
	`55`	`+ viewportObserver.unobserve(change.target);`
`59`	`56`	`}`
`60`	`57`	`}`
	`58`	`+});`
	`59`	`+`
	`60`	`+async function run(): Promise<void> {`
	`61`	`+ for (const line of select.all('.blob-code-inner:not(.rgh-observing-whitespace)')) {`
	`62`	`+ line.classList.add('rgh-observing-whitespace');`
	`63`	`+ viewportObserver.observe(line);`
	`64`	`+ }`
`61`	`65`	`}`
`62`	`66`
`63`	`67`	`function init(): void {`