From a869c6aa7eebbd6aec82029ce3ec1696a4c7e98e Mon Sep 17 00:00:00 2001
From: windingwind <33902321+windingwind@users.noreply.github.com>
Date: Tue, 25 Feb 2025 23:01:31 +0100
Subject: [PATCH] Make annotations list lazy load

---
 package-lock.json                       | 21 +++++++++++++++++++++
 package.json                            |  1 +
 src/common/components/common/preview.js | 13 +++++++++++++
 3 files changed, 35 insertions(+)

diff --git a/package-lock.json b/package-lock.json
index 85e1cd59..6b29d971 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -18,6 +18,7 @@
 				"queue": "^6.0.2",
 				"react": "^18.3.1",
 				"react-dom": "^18.3.1",
+				"react-intersection-observer": "^9.15.1",
 				"react-intl": "^7.0.1",
 				"sorted-btree": "^1.8.1"
 			},
@@ -15975,6 +15976,20 @@
 				"react": "^18.3.1"
 			}
 		},
+		"node_modules/react-intersection-observer": {
+			"version": "9.15.1",
+			"resolved": "https://registry.npmjs.org/react-intersection-observer/-/react-intersection-observer-9.15.1.tgz",
+			"integrity": "sha512-vGrqYEVWXfH+AGu241uzfUpNK4HAdhCkSAyFdkMb9VWWXs6mxzBLpWCxEy9YcnDNY2g9eO6z7qUtTBdA9hc8pA==",
+			"peerDependencies": {
+				"react": "^17.0.0 || ^18.0.0 || ^19.0.0",
+				"react-dom": "^17.0.0 || ^18.0.0 || ^19.0.0"
+			},
+			"peerDependenciesMeta": {
+				"react-dom": {
+					"optional": true
+				}
+			}
+		},
 		"node_modules/react-intl": {
 			"version": "7.0.1",
 			"resolved": "https://registry.npmjs.org/react-intl/-/react-intl-7.0.1.tgz",
@@ -32457,6 +32472,12 @@
 				"scheduler": "^0.23.2"
 			}
 		},
+		"react-intersection-observer": {
+			"version": "9.15.1",
+			"resolved": "https://registry.npmjs.org/react-intersection-observer/-/react-intersection-observer-9.15.1.tgz",
+			"integrity": "sha512-vGrqYEVWXfH+AGu241uzfUpNK4HAdhCkSAyFdkMb9VWWXs6mxzBLpWCxEy9YcnDNY2g9eO6z7qUtTBdA9hc8pA==",
+			"requires": {}
+		},
 		"react-intl": {
 			"version": "7.0.1",
 			"resolved": "https://registry.npmjs.org/react-intl/-/react-intl-7.0.1.tgz",
diff --git a/package.json b/package.json
index 8b21f41c..230d4a3b 100644
--- a/package.json
+++ b/package.json
@@ -26,6 +26,7 @@
 		"queue": "^6.0.2",
 		"react": "^18.3.1",
 		"react-dom": "^18.3.1",
+		"react-intersection-observer": "^9.15.1",
 		"react-intl": "^7.0.1",
 		"sorted-btree": "^1.8.1"
 	},
diff --git a/src/common/components/common/preview.js b/src/common/components/common/preview.js
index 855354ad..eb0123f2 100644
--- a/src/common/components/common/preview.js
+++ b/src/common/components/common/preview.js
@@ -1,5 +1,6 @@
 import React, { useContext, useRef } from 'react';
 import { FormattedMessage, useIntl } from 'react-intl';
+import { useInView } from 'react-intersection-observer';
 import cx from 'classnames';
 import Editor from './editor';
 import ExpandableEditor from './expandable-editor';
@@ -138,6 +139,17 @@ export function SidebarPreview(props) {
 	const { platform } = useContext(ReaderContext);
 	const lastImageRef = useRef();
 
+	// Set up intersection observer
+	const { ref, inView } = useInView({
+		triggerOnce: true, // Only trigger once when the element comes into view.
+		threshold: 0,      // As soon as one pixel is visible.
+	});
+
+	// If the component is not in view on mount, render a placeholder.
+	if (!inView) {
+		return <div ref={ref} style={{ minHeight: '100px' }} />;
+	}
+
 	// Store and render the last image to avoid flickering when annotation manager removes
 	// old image, but the new one isn't generated yet
 	if (props.annotation.image) {
@@ -287,6 +299,7 @@ export function SidebarPreview(props) {
 
 	return (
 		<div
+			ref={ref}
 			onContextMenu={handleContextMenu}
 			className={cx('preview', {
 				'read-only': props.readOnly, ...expandedState