feature: Delay image load until visible

src/nodes/ImageView.vue

@@ -172,6 +172,7 @@
 			isEditable: false,
 			isLastInserted: false,
 			embeddedImageList: [],
+			loadIntersectionObserver: null,
 		}
 	},
 	computed: {
@@ -230,7 +231,29 @@
 				this.isLastInserted = true
 			}
 		})
-		this.loadPreview().catch(this.onImageLoadFailure)
+	},
+	mounted() {
+		this.$nextTick(() => {
+			// nextTick is necessary, intersection detection is slightly unreliable without it
+			const options = {
+				root: null,
+				threshold: 0,
+			}
+			const startImageLoad = (entries, observer) => {
+				if (entries[0].isIntersecting) {
+					observer.disconnect()
+					this.loadPreview().catch(this.onImageLoadFailure)
+				}
+			}
+			this.loadIntersectionObserver = new IntersectionObserver(
+				startImageLoad,
+				options,
+			)
+			this.loadIntersectionObserver.observe(this.$el)
+		})
+	},
+	beforeUnmount() {
+		this.loadIntersectionObserver?.disconnect()
 	},
 	methods: {
 		async loadPreview() {